微信小程序中异步处理实例详解(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来写异步处理了。
以上就是微信小程序中异步处理实例详解(async/await)的详细内容,更多请关注其它相关文章!