微信小程序中异步处理终极方案async/await

简介: 【更新说明】经过微信开发者工具的不断升级,它的“ES6转ES5”的功能也渐渐有了加强,所以要用async/await的话,已经不需要如本文中描述的使用额外的gulp和babel来自己做预编译工作,只需要引入regenerator runtime就可以了。

【更新说明】
经过微信开发者工具的不断升级,它的“ES6转ES5”的功能也渐渐有了加强,所以要用async/await的话,已经不需要如本文中描述的使用额外的gulp和babel来自己做预编译工作,只需要引入regenerator runtime就可以了。

具体可以参考这个示例代码:
https://github.com/zarknight/owx

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库:

npm install regenerator

然后将下载文件中名为regenerator-runtime.js的文件拿出来,放到我们的小程序代码中去。

2.引入代码

在需要使用async/await特性的代码文件中,引入regenerator库:

const regeneratorRuntime = require('../../libs/regenerator-runtime')

然后,你就可以放心的在你的代码里使用async/await来写异步处理了。

目录
相关文章
|
3月前
|
新零售 供应链 小程序
复购见单模式小程序开发系统|细节方案
人们之所以喜欢在网上购物,最主要的是价格便宜,而且还能够在短时间内就拿到手
|
3月前
|
小程序
微信小程序无法使用async await的问题
微信小程序无法使用async await的问题
122 0
|
10月前
|
缓存 小程序 前端开发
【Uniapp】小程序携带Token请求接口+无感知登录方案2.0
【Uniapp】小程序携带Token请求接口+无感知登录方案2.0
254 0
|
1月前
|
小程序 前端开发 物联网
无人桌球室小程序平台系统定制开发方案
【项目摘要】随着社会进步和科技发展,无人桌球室小程序应运而生,解决传统桌球室管理难题。提供在线预订、自动计分、赛事查询及会员管理功能,采用微信小程序前端、微服务后端及物联网智能设备技术实现。市场推广结合社交媒体、线下活动及口碑营销。需开发支持,请联系小编。
|
1月前
|
前端开发 小程序 API
【微信小程序】使用 Promise、async 和 await 将异步API 改写为同步
【微信小程序】使用 Promise、async 和 await 将异步API 改写为同步
30 0
|
3月前
|
新零售 人工智能 自然语言处理
未来生物小程序商城系统开发模式|方案需求
新零售系统商城的成功离不开先进技术的支撑。
|
3月前
|
新零售 小程序 搜索推荐
排队免单模式小程序商城系统开发方案
新零售不再将线上和线下视为两个独立的销售渠道,而是将其整合为一个完整的销售生态系统
|
9月前
|
小程序
微信小程序初步运营方案
微信小程序初步运营方案
50 0
|
10月前
|
缓存 小程序 NoSQL
【Uniapp】小程序携带Token请求接口+无感知登录方案
【Uniapp】小程序携带Token请求接口+无感知登录方案
226 0
|
Web App开发 JSON 小程序
腾讯视频 微信小程序 视频下载方案
腾讯视频 微信小程序 视频下载方案

热门文章

最新文章