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

新版开发工具已原生支持,需打开增强编译

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

步骤

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

代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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 带来的好处,强烈建议开始使用。