async/await 是ES7的语法,用更加清晰的语义解决js异步代码。关于 async/await 学习可以去阮一峰老师的博客

阮老师博客不知道啥时候添加反广告屏蔽脚本。打开chrome开发者工具,按照如下打开复选框,可以进行无耻的白嫖了。

Developer tools -> "Sources" tab -> Event Listener Breakpoints -> Load

小程序是不支持 async-await 语法的,可以使用 Facebook 开源库 regenerator。

如果版本引用不当错误信息,之所以出现 async 的错误,是因为regenerator-runtime版本升级导致在小程序环境出问题(动态 Function)锁定到0.12.1版本可以解决上述 async 问题

VM4677:1 thirdScriptError 
 sdk uncaught third Error 
 Function(...) is not a function 
 TypeError: Function(...) is not a function
Page is not constructed because it is not found.
  • 下载 regenerator-runtime@0.12.1 注意版本号,开始我用的最新版一度怀疑人品有问题。
  • 将下载到的目录 packages/regenerator-runtime 下的 runtime.js 文件放入 小程序 utils 目录下。
  • 在需要使用 async/await 的js文件头部引入这个库文件。
  • 别忘了勾选微信开发者工具的项目设置中 ES6 转 ES5

eg.

// index.js
import http from '../../../api/http'
import regeneratorRuntime from '../../../utils/runtime'
let _that

Component({
  options: {
    addGlobalClass: true,
  },
  data: {
    list: []
  },
  lifetimes: {
    _that = this
    attached() {
      _that.getBlogList()
    }
  },
  methods: {
    getBlogList: async () => {
      await http('demo/list', {
          hideLoading: true,
          data: {
            'a': 'abc'
          }
        })
        .then(res => {
          console.log(res)
        })
    }
  }
})

上述 demo 中我用用到了箭头函数。如果想在小程序中使用箭头函数,可以定义一个全局变量 _that,并在 onLoad 或组件的 attached() 中把 this 做下赋值。否则会造成 this.setData 报错