微信小程序中封装wx.request请求的方法

为什么要进行封装呢？
先看如下代码

wx.request({
    
    
    method: method,
    url: url,
    header: {
    
     
      'content-type': 'application/json'
  
     },
    data:data,
    success: res => {
    
    
      return response(res)
    },
    fail: err => {
    
    
      return error(err)
    },
    complete: info => {
    
    
 
    }
  })

倘若每调用一个接口就要重复写上述的代码，这样不仅造成代码冗余，费时又费力，因此有必要对接口进行统一封装

解决方法如下
在微信小程序目录下新建Utils文件夹，文件夹中新增api.js文件

api.js的代码

const REQUEST_CACHE = []
const API_BASE_URL = ''//自己的服务器地址
/**
 * 简单请求封装
 * url: 请求地址
 * data: 请求内容
 * method: 请求方法

 */
function FetchRequest(url, data, method = '', cache = 0, header = {
    
    }) {
    
    
  
  return new Promise(Request);
  
  function Request(resolve, reject) {
    
    
    let _url = API_BASE_URL+url
    wx.request({
    
    
      url: _url,
      method: method.toUpperCase(),
      data: data,
      header: header,
      success: FetchSuccess,
      fail: FetchError, 
    })

    /**
     * 成功回调
     */
    function FetchSuccess(res) {
    
    
      if (res.statusCode >= 200 && res.statusCode < 300) {
    
    
        resolve(res);
      } else {
    
    
        FetchError(res.data);
        switch (res.status) {
    
    
          case 405:
            console.log("方法乱调用")
            // 业务逻辑处理
            break
        }
      }
    }

    /**
     * 异常处理
     */
    function FetchError(err) {
    
    
      if (err) {
    
    
        switch(err.status){
    
    
          case 405:
            console.log("发生未知错误");
            break;
            case 400:
              console.log("参数错误");
              break;
              default:
 			console.log("无网络"+err.status)
      
        wx.getNetworkType({
    
    
          success(res) {
    
    
            console.log(res)
            const networkType = res.networkType
            if (networkType ) {
    
    
              wx.showModal({
    
    
               content:'网络超时，请检查你的网络连接',
               showCancel:false
              })
            }
            
          }
        })
        break;
        }
      }
      reject(err);
    }
  }

  function RequestOver() {
    
    
    RemoveRequest(request_key);
  }
}

function FetchRequestAll(data) {
    
    
  return new Promise(function (resolve, reject) {
    
    
    Promise.all(data).then(res => {
    
    
      resolve(res)
    })
  })
}
function getUser(data){
    
    
  return FetchRequest('/user/get',data,'get')
}

module.exports = {
    
    
  fetchRequest: FetchRequest,
  fetchRequestAll: FetchRequestAll,
  getUser:getUser
}

至此封装完成

使用封装后的wx.request
在需要使用的文件引入api.js

const API=require('../../utils/api')

调用封装后的接口

onLoad: function (options) {
    
    
var id=uti.getStorageSyncTime('uid');
API.getUser({
    
    
  openId:id
}).then(res=>{
    
    
  that.setData({
    
    
               nickName:res.data.nickName,
               count:res.data.count,
               ImgUrl:res.data.imgUrl
             })
			})
}

封装完成后调用接口的代码变得简短，完美解决问题！！！