为什么要进行封装呢?
先看如下代码
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
})
})
}
封装完成后调用接口的代码变得简短,完美解决问题!!!