微信小程序promise接口封装

微信小程序（其他小程序），发送请求简单，但在一个成十上百个小程序文件的项目中，我们每一个小程序文件都要写 wx.request岂不是很麻烦？后期的维护也不方便，所以我们要对 wx.request进行进一步的封装。

第一步： 首先我们先创建一个http文件夹，然后里面再建三个小文件夹，分别为env.js, api.js, request.js。

第二步： 编辑env.js文件内容：

• 分开环境，方便切换环境。

module.exports = {
  // 开发环境  dev: {
    baseUrl: 'https://127.0.0.0:8080'
  },
  // 测试环境  test: {
    baseUrl: 'https://me.test.com'
  },
  // 生产环境  prod: {
    baseUrl: 'https://me.prod.com'
  }}

第三步： 编辑request.js文件内容：

• 开始封装。

const { baseUrl } = require('./env').dev

// 封装ajax
module.exports = {
  request: function(url, method = 'POST', data = {}, isLoading = true) {
    // 操作url
    var url = `${baseUrl}/${url}`
    // 操作data
    var data = data
    console.log(url,data)
    if (isLoading) wx.showLoading({ title: '加载中...' })
    return new Promise((resolve, reject)=>{
      wx.request({
        url: url,
        method: method,
        data: data,
        header: {
          'Content-type': 'application/x-www-form-urlencoded'
        },
        success(res) {
          if (res.statusCode === 200 && res.data.code === 0) {
            resolve(res.data)
          } else {
            wx.showToast({
              title: '接口有问题',
              icon: 'none'
            })
            reject(res.data)
          }
        },
        fail() {
          wx.showToast({
            title: '接口有问题',
            icon: 'none'
          })
          reject(res.data)
        }
      })
    })
  }
}

第四步： 编辑api.js文件内容：

• 统一放接口，方便修改和整理。

• 可以创建多个api文件，如：api1.js、api2.js、api3.js。

const { request } = require('./request')

module.exports = {
  // 获取列表
  getList:(d)=>request('shop/list', 'POST', {d}, true),
  // 获取详情
  getDetails:(d)=>request('shop/details', 'POST', {d}, true)
}

第五步： 引入到页面：

//index.js
const { getList, getDetails } = require('../../http/api')


//......
//......


onLoad: function() {
  let data = {
    code: 1,
    page: 1,
    pageSize: 10,
  }
  getList(data).then((res)=>{
    console.log(res)
  })
}

完活！收工！