Promise解决异步+回调地狱
重新再一次封装wx.request,这里封装没用reject,而是用了resolve(),个人觉得比较方便好用。
utils/request.js
const API_URL = 'https://www.xxx.cn'; //服务器api地址
function wxPromisify(fn) {
return function (obj = {}) {
return new Promise((resolve, reject) => {
obj.success = function (res) {
//成功 res.data.isSuccess 接口返回成功提示(根据自己项目来)
if (res.statusCode == 200 && res.data.isSuccess){
resolve(res.data)
}else{
resolve()
}
}
obj.fail = function (res) {
//失败
resolve()
}
fn(obj)
})
}
}
//无论promise对象最后状态如何都会执行
Promise.prototype.finally = function (callback) {
let P = this.constructor;
return this.then(
value => P.resolve(callback()).then(() => value),
reason => P.resolve(callback()).then(() => { throw reason })
);
};
function fetchApi(url, type, params) {
let getRequest = wxPromisify(wx.request);
let apiUrl = API_URL+url;
return getRequest({
url: apiUrl,
method: type,
data: params,
header: {
'content-type': 'application/json;charset=utf-8',
}
})
}
module.exports = {fetchApi};
引用 index.js
//引用request.js
import request from '../../utils/request.js';
onLoad(){
const that = this;
let params = { code: res.code}
request.fetchApi('MiniProgram/GetJsCode2Session(接口地址)', 'POST', params).then(res => {
if (res) { //res!=undefined 证明返回成功,执行花括号里面操作,否则有问题走else的错误提示操作
app.globalData.openid = openid;
} else {
that.setData({ serverfail: true,showLoad: false });
return;
}
})
.then(res=>{ //这里当上一个异步请求结束,走这里的操作
that.login(openid);
})
.then(res=>{ //这里当上一个异步请求结束,走这里的操作
that.login(openid);
})
.then(res=>{ //这里当上一个异步请求结束,走这里的操作
that.login(openid);
})
......
.then(res=>{ //这里当上一个异步请求结束,走这里的操作
that.login(openid);
})
.finally(()=>{ //这里无论请求结果怎么样都执行这里,可以做比如请求后loading过渡页动画结束之类的操作
that.setData({showLoad:false})
})
}