小程序篇-wx自带api接入Promise，提升编程体验

前面说的话：玩过小程序的都知道小程序中的 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特性，
让代码更好看，编程更愉悦。
——尼古拉斯·峰