微信小程序中封装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
             })
			})
}

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

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值