微信小程序封装请求

场景：在开发小程序项目时，为了方便维护，我们将请求的方法统一封装起来

第一步：创建一个api文件夹，并新建存放请求域名的js文件http.js

目录结构是：api/http.js 

let base = 'http://jxyx-xxxx.net/';
let baseUrl = 'http://jxyx-xxxx.net/api';
let baseImgUrl = 'http://jxyx-xxxx.net/upload/images';
let envVersion = 'trial';

export {
 base,
 baseUrl,
 baseImgUrl,
 envVersion
}

第二步：创建存放请求接口的文件：index.js 

//导入封装的请求文件
import { request } from './request'

//导出请求的接口
module.exports = {
    bindCommander: (data) => request('/userinfo/bind', 'POST', data),//团长分享绑定
    commandersiterecord: (data) => request('/admin/User/get', 'POST', data),//根据团长id查询提货点信息
}

第三步：创建封装请求的方法

//导入请求的域名
import { baseUrl } from './http.js'


module.exports = {
  request : function(url, methodType, data){
    let fullUrl = `${baseUrl}${url}`
    
    wx.showLoading({
      title: "请稍候...",
      mask: true //遮蔽层
    });
    return new Promise((resolve,reject)=>{
      wx.request({
        url: fullUrl,
        method:methodType,
        data,
        header: {
          'content-type': 'application/json', // 默认值
          'Authorization':wx.getStorageSync('sessionToken')||''
        },
        success(res){
         
          if (res.data.status == 200 || res.data.status == 204 ) {
            wx.hideLoading()
            resolve(res.data)
          }else{
            wx.hideLoading({
                complete(){
                    resolve(res.data)
                },
            }  
            )
          }
        },
        fail(err){
          console.log(err)
          var msg='网络错误,请重试';
          if(err.errno===5||err.errMsg.indexOf('time out')!=-1){
            msg="网络超时,请重试"
          }
          wx.showToast({
            title: msg,
            icon:'none'
          })
          reject(msg)
        }
      })
    })
  }
}

第四步：在页面中使用请求接口方法

//导入共用的方法与属性值
const app = getApp()
//导入请求接口地址
const api = require('../../api/index')

//开始使用封装的方法：
api.toReceiveList({
    "page":this.data.page,//这是传的参数
    "size":this.data.size//这是传的参数
}).then((res)=>{
    if(res.status==200){
        this.setData({
            couponsTotal:res.data.itemCount//赋值
        })
    }
})