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

前言

之前写小程序,每次请求后台时都直接调用原生的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就不说了

最后

此致,敬礼

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

上一篇:c#.NET微信自定义菜单


下一篇:Android-手机端开发用界面原型与布局工具