`
hereson
  • 浏览: 1449507 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

微信小程序中异步处理实例详解(async/await)

 
阅读更多
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的6个理由

    async/await 是写异步代码的新方式,以前的方法有回调函数和Promise。 async/await 是基于 Promise 实现的,它不能用于普通的回调函数。 async/await 与 Promise 一样,是非阻塞的。 async/await 使得异步代码看...

    一斤代码:微信小程序中异步处理终极方案async/await

    Promise和co都搞过了,终于还是忍不住要折腾,上ES7的终极方案:async/await。 async/await也是和Promise配合使用的, 先来看一下示例代码,这个用法和我们之前讲的co的用法是极其相似的: function myAsyncFunc() { ...

    async/await异步处理demo

    此外,`async/await`与Promise配合使用,可以轻松地处理异步操作的错误。`await`表达式抛出的错误会被包含它的try/catch块捕获,这与处理同步错误的方式相同。这提供了更好的错误处理机制,避免了回调地狱中的“错误...

    [微信小程序] 终于可以愉快的使用 async/await 啦

    这篇文章主要是想说一下 怎么在微信小程序中使用async/await从而逃离回调地狱 背景 最近一直在搞微信小程序 用的语言是TypeScript 小程序的api都是回调形式 用起来就是各种回调嵌套 我个人很不喜欢 所以一直想用...

    详解小程序原生使用ES7 async/await语法

    本篇文章将详解如何在微信小程序原生环境下使用ES7的async/await语法。 首先,需要了解的是,虽然小程序框架使用的是JavaScript,但其对JavaScript新特性(如ES6及以上版本)的支持可能不像现代浏览器那样全面。...

    微信小程序异步API同步化研究.zip

    - 微信小程序自版本2.3.0开始支持async/await语法,开发者可以在小程序中编写更简洁的异步代码。 - 示例: ```javascript async function fetchData() { const res = await wx.request({ url: '...

    Dart异步编程:掌握Future和async/await关键字

    Dart语言通过Future和async/await关键字提供了强大的异步编程能力,使得开发者能够以近乎同步的方式编写异步代码。本文将详细介绍如何在Dart中使用这些特性进行异步编程,并提供实际的代码示例。 通过使用Future、...

    微信小程序 实例汇总 完整项目源代码

    2. 异步处理:所有网络请求都是异步的,需要通过Promise或async/await进行管理。 3. 文件上传下载:wx.uploadFile()和wx.downloadFile()分别用于上传和下载文件,同样需要处理异步回调。 五、微信小程序存储 小程序...

    微信小程序-微信小程序,菜谱大全

    10. 性能优化:小程序中,开发者需要注意性能优化,如避免阻塞主线程的长时间计算,合理使用Promise和async/await进行异步操作,以及使用`wx.onMemoryWarning`监听内存警告,及时释放资源。 综上所述,“微信小程序...

    深入理解ES7的async/await的用法

    ES7的async/await是解决JavaScript异步编程的重要概念,它能够使得异步代码更易读、更易维护。本文将深入探讨async/await的用法,并与Promise和co模块进行比较。 1. async/await是什么? async/await可以说是co...

    微信小程序异步API同步化研究.pdf

    3. 使用async/await语法:async/await是一种更为现代的异步编程方式,可以让异步代码的书写和理解类似于同步代码,极大地提高了代码的可读性和编写效率。 4. 应用Promise化封装:对于小程序已有的异步API,可以通过...

    强大、优雅的微信小程序异步库.zip

    它可能提供了Promise包装器,将微信小程序的异步方法转换为返回Promise的对象,使得开发者可以利用async/await语法糖来编写更加流畅的异步代码。 Promise是JavaScript中处理异步操作的重要工具,它解决了回调地狱的...

    小程序如何支持使用 async/await详解

    然而,微信小程序原生并不支持`async/await`语法,因为它是基于JavaScript的轻量级运行环境,其语法特性受到了限制。但是,通过一些技巧和第三方库,我们可以让小程序支持`async/await`。 首先,我们要明白`async/...

    微信小程序中使用Async-await方法异步请求变为同步请求方法

    微信小程序中有些 Api 是异步的,无法直接进行同步处理。例如:wx.request、wx.showToast、wx.showLoading等。如果需要同步处理,可以使用如下方法: 注意: Async-await方法属于ES7语法,在小程序开发工具中如果...

    详解用async/await来处理异步

    总的来说,async/await提供了一种更为优雅和直观的方法来处理JavaScript中的异步操作,是现代JavaScript开发不可或缺的一部分。通过上述的讲解和示例,我们可以体会到它与传统的Promise相比带来的便利性。如果你正在...

    AwaitKit:受 ES8 Async/Await 启发,用 Swift 实现的异步编程库.zip

    Async/Await 语法在 JavaScript(ES8 及以后版本)中引入,它允许开发者像处理同步代码一样处理异步操作。在 Swift 中,AwaitKit 实现了类似的概念,通过关键字 `await`,可以在异步操作前暂停当前执行流程,直到...

Global site tag (gtag.js) - Google Analytics