微信小程序wx.request的简单封装

时间：2024-03-11 12:09:10

前言

之前写小程序，每次请求后台时都直接调用原生的API，wx.request，每次都要写url，data，回调函数等，正好前段时间，小程序项目需要添加新内容，趁此机会，做一个封装的请求工具，比较简单。

本文若有出入，请指正——来自小渣渣的颤抖
客官可移步小站看本文http://fanjiajia.cn/2019/07/06/wxxcx/flx1/

原生的API

首先看看原生的api，wx.request需要写如下东西：

wx.request({
      url: \'\', // url地址
      // 参数
      data:{ 

      },
      method:\'\', // post || get
      success: res=> {
      // 请求成功回调函数，res为回调参数

      },
      fail:res=> {
        // 请求失败回调函数，res为回调参数
      }
    })

每次网络请求都需要写这些内容，其实在实际项目中，大多情况下url都是由基地址+请求模块构成，比如https://woshigecainiao.com/myservice/login， 这里基地址为：https://woshigecainiao.com/myservice/， 模块为/login。 基地址一般都不会变，method通常也是约定好的，一律post或者get等，fail回调一般都会统一处理，所以不同的是参数data，和请求成功后的处理。

实现

在util目录下新建NetAPI.js
const config = require ("../config.js") // 域名配置等
const request = (url, data, showLoading) => {
  let _url = config.baseurl + url;
  return new Promise((resolve, reject)=> {
    // 由调用者控制是否需要显示加载对话框
    if (showLoading){
      wx.showLoading({
        title: \'加载中\',
        mask: true
      })
    }
    wx.request({
      url: _url,
      method: \'post\',
      data: data,
      success(res) {
        // console.error(res)
        wx.hideLoading();
        resolve(res.data)
      },
      fail(err) {
        console.error(\'网络请求失败\',err)
        wx.hideLoading();
        wx.showModal({
          title: \'提示\',
          content: \'网络请求失败\',
          showCancel: false
        })
      }
    })
  })
}
module.exports = {
  // 此处调用可直接使用NetAPI.VehicleResManager(data).then(...)，第二个参数showLoading采用缺省，即默认使用加载，调用给false，即可屏蔽默认的加载框，js不支持方法重载，也是没办法
  VehicleResManager: (data, showLoading) => { 
    return request(config.CLYYQuery, data, showLoading == undefined ? true : showLoading)
  }
}

这里我导入了config.js文件，其中配置了后台服务器的ip和后台请求基地址和请求模块地址等，这样便于统一管理，只需要在config中配置，NetAPI中调用即可，NetAPI中不关心具体的url。

const request = (url, data, showLoading) => {...}
  • url：后台不同模块的入口，比如login等这样的模块
  • data：请求所需要的参数data
  • showLoading：发起网络请求是否需要显示加载对话框的控制开关
    以我这里的例子为例，我最后暴露除了VehicleResManager,即车辆预约管理模块，所对应了后台模块地址卸载config中config.CLYYQuery，这样，在page的js中只需要简单的调用暴露的相关入口即可。
调用

在某个page中首先导入该工具

const NetAPI = require(\'../../utils/NetAPI.js\')

调用处：

NetAPI.VehicleResManager(data, that.data.curPage == 0).then(res => {...}

res即为请求返回数据，不包含网络状态等，因为在工具中resolve(res.data)中直接返回的是返回体的data部分。

这里关于Promise就不说了

最后

此致，敬礼

相关文章