微信小程序开发用 JS ES8 async/await 解决异步调用

在小程序开发中,通过打开 ES6 转 ES5 功能,可以直接在代码中使用 Promise。
但是还是不够,ES8 提供了 async/await 关键字,让你可以像同步方法一样使用异步方法。

步骤

  1. 下载运行时文件  regenerator-runtime (来自 Facebook 的开源库,在 Raw 按钮上右击-另存为)。
  2. 将下载到的文件放在项目文件夹中,比如 libs 文件夹。
  3. 在需要使用 async/await 的 JS 文件的头部引用这个库文件。
  4. 保持微信开发者工具的项目设置中 ES6 转 ES5 处于打开状态。

代码示例

import regeneratorRuntime from '../../libs/runtime';

Page({
  onLoad() {
    this.getList();
  },

  async getList() {
    try {
      let result = await getListAsync();
      console.log(result);
    } catch (error) {
      console.log(error);
    }
  },
});

注意事项

  • runtime 文件路径根据具体项目修改。
  • 本示例不需要使用第三方预处理器(如 Gulp 等)以及第三方框架(mpvue,wepy 等)。
  • 为了压缩库文件大小,建议勾选「上传代码时自动压缩」。
  • 此方法的缺点是,每个需要使用 async/await 的 js 文件都需要手动引用库文件。

总结

regenerator-runtime 文件压缩后仅 6k(微信开发工具可选择自动压缩),只要引用一个文件即可享受 async/await 带来的好处,强烈建议开始使用。

14 Replies to “微信小程序开发用 JS ES8 async/await 解决异步调用”

  1. 请问,怎样将 regeneratorRuntime 设置为小程序全局的变量呢,因为通过 import 的引入,只对当前页面起效果,其他页面使用 async ,需要再次引入 regeneratorRuntime。

    1. 在不引入框架的前提下,只能每个文件都添加 import,后续小程序很可能会原生支持 ES8 转 ES5,敬请期待。

  2. Cannot read property ‘mark’ of undefined
    TypeError: Cannot read property ‘mark’ of undefined
    为什么我的添加后报错啊 如果不勾选es6转。。。就没问题。。跪求

      1. 怎么解决的啊?我也报错 TypeError: Cannot read property ‘mark’ of undefined ……

  3. 你好,按照你说的方法,一直到11月16日都可以,11月17日之后小程序似乎就不能这样用了,请你看看什么问题?有没有别的解决方案。

    1. 早上测试过,还是可以这样用,没有任何问题。还有问题请联系我的推,在右上角。

    2. 我的也不行
      thirdScriptError
      sdk uncaught third Error
      Cannot read property ‘default’ of undefined
      TypeError: Cannot read property ‘default’ of undefined
      at http://127.0.0.1:41871/appservice/utils/drawCard2.js:10:55
      at http://127.0.0.1:41871/appservice/utils/drawCard2.js:55:2
      at require (http://127.0.0.1:41871/appservice/dev/WAService.js:19:7304)
      at http://127.0.0.1:41871/appservice/dev/WAService.js:19:7018
      at http://127.0.0.1:41871/appservice/pages/style/index.js:4:16
      at require (http://127.0.0.1:41871/appservice/dev/WAService.js:19:7304)
      at :120:7
      at HTMLScriptElement.scriptLoaded (http://127.0.0.1:41871/appservice/appservice?t=1542762088187:1768:23)

  4. 应该是调试基础库的问题,选择2.3.2就不会报错,但是真机调试的话不知道是不是用的微信最新的基础库?

发表评论

电子邮件地址不会被公开。 必填项已用*标注