前面说的话:玩过小程序的都知道小程序中的 api对象 都是以这样的形式展示的,
这里以wx.request举例
wx.request({
url: '',
success(){
},
fail(){ }
});
这样就会带来一些问题,比如你需要连续调用好几个api,
回调地狱(Callback Hell)就来了
wx.request({
url: '',
success(){
wx.request({
url: '',
success() { },
fail() { }
});
},
fail(){ }
});
如何解决这个问题呢?当然还是用宇宙超级无敌的Promise了。
新建一个wxp.js文件放置于你想放的地方,
代码如下:
const toPromise = (fn) => {
// 这个api不是一个方法,直接返回该api
if (typeof fn !== 'function') return fn;
return (args = {}) => {
// 这个api的参数不是对象,直接返回方法(参数)
if (typeof args !== 'object') {
return fn(args);
}
// 这个api是有sussess和fail这样子的回调函数 就有promise方法
return new Promise((resolve, reject) => {
args.success = resolve;
args.fail = reject;
fn(args);
});
};
};
export default Object.keys(wx).reduce((o, name) => {
o[name] = toPromise(wx[name]);
return o;
}, {});
其他页面调用
import wxp from '../../lib/wxp';
// ...
// ...
wxp.request({
url: 'url1',
}).then((res) => {
// url1 success
return wxp.request({
url: 'url2',
});
}, (res) => {
// url1 fail
}).then((res) => {
// url2 success
}, (res) => {
// url2 fail
});
// ...
其他的很多api就都可以用wxp的方式来调用了
这样子,我们就解决了回调地狱了。
当要连续调用多个wx api的时候,我们还是采用es6的Promise特性,
让代码更好看,编程更愉悦。
——尼古拉斯·峰
网友评论