前面說的話:玩過小程序的都知道小程序中的 api對象 都是以這樣的形式展示的阳掐,
這里以wx.request舉例
wx.request({
url: '',
success(){
},
fail(){ }
});
這樣就會帶來一些問題糊秆,比如你需要連續(xù)調(diào)用好幾個api武福,
回調(diào)地獄(Callback Hell)就來了
wx.request({
url: '',
success(){
wx.request({
url: '',
success() { },
fail() { }
});
},
fail(){ }
});
如何解決這個問題呢?當(dāng)然還是用宇宙超級無敵的Promise了痘番。
新建一個wxp.js文件放置于你想放的地方捉片,
代碼如下:
const toPromise = (fn) => {
// 這個api不是一個方法平痰,直接返回該api
if (typeof fn !== 'function') return fn;
return (args = {}) => {
// 這個api的參數(shù)不是對象,直接返回方法(參數(shù))
if (typeof args !== 'object') {
return fn(args);
}
// 這個api是有sussess和fail這樣子的回調(diào)函數(shù) 就有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;
}, {});
其他頁面調(dià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的方式來調(diào)用了
這樣子伍纫,我們就解決了回調(diào)地獄了觉增。
當(dāng)要連續(xù)調(diào)用多個wx api的時候,我們還是采用es6的Promise特性翻斟,
讓代碼更好看逾礁,編程更愉悅。
——尼古拉斯·峰