对于一个稍微大一点的项目,必定会遇到很wx.request
一、如何一个项目里多处有与后台的交互,如果每个地方 都要按照官方文档的方法写一次,对于项目后期的维护肯定是较为麻烦的,下面是结合es6中,新增的Promise原理封装的方法
1、首先,自己选择在一个目录下新建个js文件(我这边是在utils目录下新建的api.js)
2、费话不多说,上代码
const baseURL = 'https://';//请求地址,前缀(自定义)
let header = {
'content-type': 'application/json',//这个是默认的
};
let url = {
loadopeonid : `${baseURL}www.baidu.com`
}
const getOpenid = function(method='Get',data={}){
return new Promise((resolve,reject)=>{
let isurl = url.loadopeonid;
wx.request({
method,
isurl,
data,
dataType:'json',
header,
success(res) {
//请求成功
if (res.data.errCode == 200) {//判断状态码---errCode状态根据后端定义来判断
resolve(res);
} else {
//其他异常
reject('网络延迟,请稍后再试');//这个错自己定义的,看你自身的情况写什么,一般可以给用户看,也可以用作自己调试的提醒
}
},
fail(err) {
//请求失败
reject(err)
}
});
})
}
const $api = {
getOpenid
};
module.exports = {
$api
}
3、在需要的页面
const $api = require('../../utils/api-1.js').$api
4、然后我这边举个例子
Page({
data: {},
onLoad: function ('GET',options) {
wx.login({
success:res=> {
// 调用接口,传入参数
$api.getOpenid({
id:1001,
name:'tom'
})
.then((data)=>{
console.log('success');//成功回调
})
.catch((message)=>{
console.log(message);//失败
})
}
})
}
})