Promise和co都搞过了,终于还是忍不住要折腾,上ES7的终极方案:async/await。
async/await也是和Promise配合使用的, 先来看一下示例代码,这个用法和我们之前讲的co的用法是极其相似的:
function myAsyncFunc() {
return new Promise(function (resolve, reject) {
setTimeout(function () {
console.log("myAsyncFunction done!");
resolve({data: "Hello,World"});
}, 5000);
});
}
async function test() {
var result = await myAsyncFunc();
console.log(result.data); //Hello,World
}
test();
要在小程序中使用async/await的话,靠微信web开发者工具中的Babel转换工具是不够的了,因为需要一些额外的Babel插件来编译使用了async/await的代码。所以这次我们得自己写脚本来调用Babel。
在项目中,我们得先关闭“开启ES6转ES5”这个选项,因为我们现在要自己来做这件事情。
关闭选项
然后,我准备用Gulp来写我的脚本,从Gulp中调用Babel来编译我的代码。当然你也可以用你其他的工具如Grunt, Webpack之类的,你可以参考这里来了解如何在你使用的build工具中使用Babel。
重要的一点是,我们调用Babel时,需要给我们的Babel配置插件以支持async/await,比如async-to-generator,async-generator-functions等插件。方便起见,直接使用preset(也就是官方配置好的插件包),es2017或latest这两个preset其中之一都能满足我们的需要。
这是Babel的配置文件:.babelrc
{
"presets": [ "latest" ],
"plugins": []
}
然后在我的gulpfile.js中,我会将我的小程序项目下所有的js文件都通过Babel编译:
gulp.task('scripts', () => {
return gulp.src('./src/**/*.js')
.pipe(babel())
.pipe(gulp.dest('./dist'))
})
好了,这是我们编译我们的代码所要做的工作。接下来,我们讲一下在小程序代码中要做的一些改动:
1. 引入generator支撑库
经过Babel转译后的代码,会把aysnc/await的功能通过类似co库的方式来实现,即要使用到generator,所以,和我们使用co的时候一样,需要依赖一个regeneratorRuntime,才能支持generator特性。我们可以使用Facebook开源的regenerator库。你可以通过npm来下载这个regenerator库:
1
npm install regenerator
然后将下载文件中名为regenerator-runtime.js的文件拿出来,放到我们的小程序代码中去。
2.引入代码
在需要使用async/await特性的代码文件中,引入regenerator库:
1
const regeneratorRuntime = require('../../libs/regenerator-runtime')
然后,你就可以放心的在你的代码里使用async/await来写异步处理了。
分享到:
相关推荐
async/await 是写异步代码的新方式,以前的方法有回调函数和Promise。 async/await 是基于 Promise 实现的,它不能用于普通的回调函数。 async/await 与 Promise 一样,是非阻塞的。 async/await 使得异步代码看...
Promise和co都搞过了,终于还是忍不住要折腾,上ES7的终极方案:async/await。 async/await也是和Promise配合使用的, 先来看一下示例代码,这个用法和我们之前讲的co的用法是极其相似的: function myAsyncFunc() { ...
此外,`async/await`与Promise配合使用,可以轻松地处理异步操作的错误。`await`表达式抛出的错误会被包含它的try/catch块捕获,这与处理同步错误的方式相同。这提供了更好的错误处理机制,避免了回调地狱中的“错误...
这篇文章主要是想说一下 怎么在微信小程序中使用async/await从而逃离回调地狱 背景 最近一直在搞微信小程序 用的语言是TypeScript 小程序的api都是回调形式 用起来就是各种回调嵌套 我个人很不喜欢 所以一直想用...
本篇文章将详解如何在微信小程序原生环境下使用ES7的async/await语法。 首先,需要了解的是,虽然小程序框架使用的是JavaScript,但其对JavaScript新特性(如ES6及以上版本)的支持可能不像现代浏览器那样全面。...
- 微信小程序自版本2.3.0开始支持async/await语法,开发者可以在小程序中编写更简洁的异步代码。 - 示例: ```javascript async function fetchData() { const res = await wx.request({ url: '...
Dart语言通过Future和async/await关键字提供了强大的异步编程能力,使得开发者能够以近乎同步的方式编写异步代码。本文将详细介绍如何在Dart中使用这些特性进行异步编程,并提供实际的代码示例。 通过使用Future、...
2. 异步处理:所有网络请求都是异步的,需要通过Promise或async/await进行管理。 3. 文件上传下载:wx.uploadFile()和wx.downloadFile()分别用于上传和下载文件,同样需要处理异步回调。 五、微信小程序存储 小程序...
10. 性能优化:小程序中,开发者需要注意性能优化,如避免阻塞主线程的长时间计算,合理使用Promise和async/await进行异步操作,以及使用`wx.onMemoryWarning`监听内存警告,及时释放资源。 综上所述,“微信小程序...
ES7的async/await是解决JavaScript异步编程的重要概念,它能够使得异步代码更易读、更易维护。本文将深入探讨async/await的用法,并与Promise和co模块进行比较。 1. async/await是什么? async/await可以说是co...
3. 使用async/await语法:async/await是一种更为现代的异步编程方式,可以让异步代码的书写和理解类似于同步代码,极大地提高了代码的可读性和编写效率。 4. 应用Promise化封装:对于小程序已有的异步API,可以通过...
它可能提供了Promise包装器,将微信小程序的异步方法转换为返回Promise的对象,使得开发者可以利用async/await语法糖来编写更加流畅的异步代码。 Promise是JavaScript中处理异步操作的重要工具,它解决了回调地狱的...
然而,微信小程序原生并不支持`async/await`语法,因为它是基于JavaScript的轻量级运行环境,其语法特性受到了限制。但是,通过一些技巧和第三方库,我们可以让小程序支持`async/await`。 首先,我们要明白`async/...
微信小程序中有些 Api 是异步的,无法直接进行同步处理。例如:wx.request、wx.showToast、wx.showLoading等。如果需要同步处理,可以使用如下方法: 注意: Async-await方法属于ES7语法,在小程序开发工具中如果...
总的来说,async/await提供了一种更为优雅和直观的方法来处理JavaScript中的异步操作,是现代JavaScript开发不可或缺的一部分。通过上述的讲解和示例,我们可以体会到它与传统的Promise相比带来的便利性。如果你正在...
Async/Await 语法在 JavaScript(ES8 及以后版本)中引入,它允许开发者像处理同步代码一样处理异步操作。在 Swift 中,AwaitKit 实现了类似的概念,通过关键字 `await`,可以在异步操作前暂停当前执行流程,直到...