小程序API的promise化

看了微信的API文档，我们知道很多操作都是异步去执行的，处理函数都是写在回调函数里面，而很多时候在一个异步操作执行完成之后又要接着去执行另一个异步操作，这样很容易形成回调地狱，比如下面这个获取用户资料注册的例子：

// 第一步获取code，用于后台换取open_id, session_key
wx.login({
  success: function(res) {
    console.log('login--->', res);
    // 第二步查看是否有获取用户资料的权限
    wx.getSetting({
      success: function(settings) {
        console.log('getSetting--->', settings);
        // 第三步获取用户资料
        wx.getUserInfo({
          success: function(userInfo) {
            console.log('userInfo--->', userInfo);
          },
          fail: function(err){
            console.log(err)
          }
        })
      },
      fail: function(err){
        console.log(err)
      }
    })
  },
  fail: function(err){
    console.log(err)
  }
})

可以看到这种嵌套回调的写法非常繁琐，而且调试起来也很不方便。
微信开发者工具其实是已经支持了 Promise 的，然后我们发现小程序的API接口几乎都是统一提供了 success 和 fail 这两个回调函数的，于是我们就可以对API进行promise化的改造了。

为了方便调用，我们新建一个 wxapi.js 的文件

/**
 * promise化接口
 */
function wxPromisify(functionName, params) {
  return new Promise((resolve, reject) => {
    wx[functionName]({
      ...params,
      success: res => resolve(res),
      fail: res => reject(res)
    });
  });
}

/**
 * 登录
 */
function login(params={}) {
  return wxPromisify('login', params);
}

/**
 * 获取用户信息
 */
function getUserInfo(params={}) {
  return wxPromisify('getUserInfo', params);
}

/**
 * 获取用户权限
 */
function getSetting(params={}) {
  return wxPromisify('getSetting', params);
}

module.exports = {
  login,
  getUserInfo,
  getSetting
}

其实也是比较简单的封装，但是包装完成之后，就可以使用 then 、catch 方法，可以大大的简化代码量，而且逻辑上也更清晰。下面我们来重写一下获取用户信息的方法：

const utils = require('./wxapi.js');
wxapi.login()
  .then(res => {
    console.log('login--->', res);
    return wxapi.getSetting();
  }).then(res => {
    console.log('getSetting--->', res);
    return wxapi.getUserInfo();
  }).then(res => {
    console.log('userInfo--->', res);
  }).catch(err => {
    console.log(err);
  });

可以看到效果还是比较明显的，对于需要promise化的接口直接去wxapi.js里面补充就行。
Promise的 race 方法、all 方法同样也被解锁。😃

相关链接

• Promise对象