小程序点睛之一：如何将小程序异步回调接口 Promise 化

前言

ES6 标准的 Promise 解决了 Javascript 代码中比较常见的回调地狱问题，搭配 async/await 能够用同步的方式写异步逻辑，大大提升了开发效率。

可是至今仍有不少库没有实现 Promise 化的接口，其中就包括微信小程序的 api。

为了避免向恶势力妥协，写出风格统一的代码，咱们有必要了解何为 Promise。

本文假定读者有必定 JavaScript 基础，同时了解 Promise 的基本用法。

回调接口

异步回调接口指的是经过传递函数来处理异步方法调用，通常有两种方式。

• 小程序方式

  分别传递成功和失败的回调以处理两种不一样状况

  wx.showToast({
    title: 'Hello, world',
    success: () => console.log('success'),
    fail: () => console.log('failure'),
  })
  复制代码

• MongoDB 方式

  传递一个以 error 为首参数的回调用以鉴别是否调用成功

  db.find({ name: 'Idan Loo' }, (err, data) => {
    if (err) {
      // err 是调用失败的缘由
      console.log(err)
      return
    }
    // data 就是异步传递回来的参数
    console.log(data)
  })
  复制代码

两种方式各有千秋，这里仅讨论微信方式，MongoDB 方式的接口 Promise 化相信各位能够触类旁通。

Promise 化

简单实现

以 showToast 为例

const showToast = option =>
  new Promise((resolve, reject) => 
    wx.showToast({...option,
      success: resolve,
      fail: reject,
    })
  )

showToast({ title: 'Hello, Promise' })
  .then(() => console.log('success'))
  .catch(() => console.log('failure')) 
复制代码

你已经知道了如何 Promise 化小程序的接口，如今你只须要重复上面的代码，将全部你须要用到的接口改成 Promise 的便可。

高级一点的实现

复制粘贴一把梭虽然快，可是做为一名程序员，天然应该追求更简洁的实现。

经过观察，小程序全部的异步接口都采用了相同的形式，而且都位于 wx 对象中，故咱们能够抽象出通用的 promisify 方法用以 Promise 化小程序的接口

const promisify = name => option => 
  new Promise((resolve, reject) =>
    wx[name]({...option,
      success: resolve,
      fail: reject,
    })
  )

const showToast = promisify('showToast')
const request = promisify('request')
复制代码

如今只需一行代码，就能够 Promise 化小程序的接口，赶忙把以前写的丑陋的回调代码改过来吧！

更高级的实现

若是你跟我同样，代码洁癖到上述代码都接受不了的话，那恭喜你，经过 Proxy 能够更好的实现咱们的目标。

const pro = new Proxy(wx, {
  get(target, prop) {
    return promisify(prop)
  }
})

pro.showToast({ title: 'Hello, world' }).then(...)
pro.request({ url: 'https://github.com' }).then(...)
复制代码

在 promisify 方法的基础上，给 wx 对象加了个代理，如今你能够像使用 wx 对象同样使用 pro，而且全部的异步方法都变成了 Promise 形式的！

无需实现

最好的实现就是交给别人实现，正好我已经把前文中的代码打包上传, minapp-promise，不足 1k，开箱即用。

能看到这里着实不易，但愿大家能给我点个赞，顺便在 GitHub 给我个星星就更好了。

手机码字，若有错漏，万望斧正。