在小程序中使用Promise

今年去了新公司
主要负责的业务是小程序
之前的代码使用es5写的
充斥这大量的异步函数嵌套
还有很多的var that = this…
于是乎
想慢慢的都改成es6
先从自己负责的部分开始把

小程序

总的来说，小程序要比写移动端的页面要简单
小程序为我们做了很多的封装，提供了自动补全，代码压缩之类的功能
省去了很多麻烦

想用es6，自然得考虑兼容性是否可以接收
小程序文档

看来还好

小程序异步方法

小程序的异步方法的格式其实都差不多
例如wx.request

wx.request({
  url: 'test.php', //仅为示例，并非真实的接口地址
  data: {
     x: '' ,
     y: ''
  },
  header: {
      'content-type': 'application/json' // 默认值
  },
  success: function(res) {
    console.log(res.data)
  },
  fail: function(err) {
    console.log(err)
  }
})

基本上小程序的异步方法都有两个参数，success、fail对应成功和失败的处理函数，既然格式统一，那就好解决了

小程序异步方法Promise化

function wxPromisify(fn) {
  // 返回一个返回Promise的函数
  return function(obj = {}) {
    // 返回Promise对象
    return new Promise((resolve, reject) => {
      obj.success = function(res) {
        resolve(res)
      }
      obj.fail = function(res) {
        reject(res)
      }
      // 传入小程序异步方法的参数，默认设置success、fail方法
      fn(obj)
    })
  }
}

request = wxPromisify(wx.request)
// 就可以这样使用微信的异步方法了，使用箭头函数，也不用每次在回调里去使用外层that来保存this了
request({url: 'test.php', data: {x: 1}}).then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
})