小程序點睛之一：如何將小程序異步回調接口 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 給我個星星就更好了。

手機碼字，若有錯漏，萬望斧正。