通常在微信小程序的商城项目中，常常需要wx.request调用API接口，从服务器端返回已经存储好的数据并且进行json格式化，将返回的数据进行渲染。但页面结构可能需要多次调用API接口，导致wx.request中继续套嵌wx.request，如此循环。这样就形成了回调地狱，所以为了避免这种情况，我们可以通过promise和wx.request来优化代码。
先看下可能性的回调地狱状况：
wx.request({
url: 'https://xxx.com/getId',
success: (res) => {
this.setData({
// 数据处理
})
wx.request({
url: 'https://xxx.com/getImageById',
success: (res) => {
this.setData({
// 数据处理
})
wx.request({
url: 'https://xxx.com/getDataById',
success: (res) => {
this.setData({
// 数据处理
})
}
})
}
})
}
})
我们先看下通过promise优化后的代码：
request.js代码：封装request并export接口
export const request = (params) => {
return new Promise((resolve, reject) => {
wx.request({
...params,
success: (res) => {
resolve(res);
},
fail:(err) => {
reject(err);
}
});
})
}
index.js修改主页wx.request代码：
import {requset} from "../request/request.js";
...其他代码
onLoad: function (options) {
request({url:"https://xxx.com/getById"})
.then(result=> {
this.setData({
// 处理数据
})
})
}
这是比较简单优化wx.request的回调，如果有内嵌wx.request，可以继续使用.then()，如此循环。
网友评论