小程序使用 async 和await

不懂 async 使用的可以先看这里！Callback、Promise、Generator、async/await 对比

引入 polyfill，让小程序支持 async

小程序默认是不支持那么多 ES7 的内容，所以我们需要引入一个 polyfill

所以我们使用一个：regenerator-runtime

引入 facebook/regenerator (opens new window) 中的 packages/regenerator-runtime/runtime.js

由于全局都需要使用，所以在 app.js 引入就行

// lib的位置自己定义
import regeneratorRuntime from './lib/runtime'

App({
  // ...
})

剩下要用 async 做啥就看自己的了

使用 async 封装微信的 api

比如在 utils/wxapi/index.js 中：

/**
 * promise微信API方法
 */
function wxPromise(api) {
  function func(options, ...params) {
    return new Promise((resolve, reject) => {
      api(
        Object.assign({}, options, {
          success: res => {
            resolve(res)
          },
          fail: reject
        }),
        ...params
      )
    })
  }
  return func
}
function getWxPromiseObject() {
  let obj = {}
  for (const property in wx) {
    obj[property] = wxPromise(wx[property])
  }
  return obj
}
export default getWxPromiseObject()

在需要应用的页面

const wxApi = require('/utils/wxapi')

Page({
  onShow() {
    const res = await wxApi.getSystemInfo()
    console.log(res)
  }
})

后记

使用 async 是方便，不过不管成功还是错误，我们都需要有一个处理
美中不足的就是 async 对于错误的处理方式不太友好，比如上面的例子，res 成功和失败都是返回在 res 里面，如果这时候要去做判断那就麻烦咯

下一篇，将介绍：如何优雅处理 async 抛出的错误