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

Promise和co都搞过了，终于还是忍不住要折腾，上ES7的终极方案：async/await。

async/await也是和Promise配合使用的,先来看一下示例代码，这个用法和我们之前讲的co的用法是极其相似的：

functionmyAsyncFunc(){

returnnewPromise(function(resolve,reject){

setTimeout(function(){

console.log("myAsyncFunctiondone!");

resolve({data:"Hello,World"});

},5000);

});

}

asyncfunctiontest(){

varresult=awaitmyAsyncFunc();

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',()=>{

returngulp.src('./src/**/*.js')

.pipe(babel())

.pipe(gulp.dest('./dist'))

})

好了，这是我们编译我们的代码所要做的工作。接下来，我们讲一下在小程序代码中要做的一些改动：

1.引入generator支撑库

经过Babel转译后的代码，会把aysnc/await的功能通过类似co库的方式来实现，即要使用到generator，所以，和我们使用co的时候一样，需要依赖一个regeneratorRuntime，才能支持generator特性。我们可以使用Facebook开源的regenerator库。你可以通过npm来下载这个regenerator库：

1

npminstallregenerator

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

2.引入代码

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

1

constregeneratorRuntime=require('../../libs/regenerator-runtime')

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