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