美文网首页微信小程序小程序Web 前端开发
微信小程序中异步处理终极方案async/await

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

作者: 一斤代码 | 来源:发表于2017-01-10 19:30 被阅读8811次

    【更新说明】
    经过微信开发者工具的不断升级,它的“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来写异步处理了。

    相关文章

      网友评论

      • 3e5d522082a8:老哥,问一下.为什么执行gulp命令只有根目录下的js生成了,pages目录下面的却没有生成???很疑惑???
        3e5d522082a8:@一斤代码 基本还差最后一步就完成了,卡在这边了,希望老哥能给我指条明路
        3e5d522082a8:@一斤代码 微信是可以支持了,但我发现一些iphone对这个不支持,报错了,所以想转换一下.我弄了一个小程序的默认的模板,路径的话就是最普通的pages/index/xxx这样子的.我按照你的gulpfile.js里面src/**/*.js这样子,发现只有src下的app.js编译了.我查了一下**/*.js应该是可以匹配所有目录下的js了,很奇怪,找不到问题所在...:sob:
        一斤代码:你的gulp指定处理的js路径是什么样的?

        另外,由于微信开发者工具的升级支持,现在我们也可以不用gulp了,具体可以看文章开头的声明
      • 逆袭之前:很赞,特别是最上边的更新,很负责,减少了很多工作
        一斤代码:应该的应该的,要对自己写的东西负责一点,避免给人误导😁
      • 不锈钢奶豆:兄弟厉害了,一波666送给你,解决了我的难题,我的步骤:先npm一下,找到runtime.js添加到小程序,然后const regeneratorRuntime = require('../../libs/runtime.js')导入到需要用async/await的js文件中就可以了【特意新注册过来留的言】
        一斤代码::clap: 哈哈,感谢过来留言捧场
      • e76250574b29:引入var regeneratorRuntime = require('../../utils/runtime.js')以后怎么做呢?
        一斤代码:引入这个以后,就可以直接在代码中使用async/await语法了。比如这个代码:
        https://github.com/zarknight/owx/blob/master/pages/index/index.js
      • 茶树菇小学生:不知道作者能不能看到,我是小白,如果你能看到,希望给予帮助,我也想用async,遇到这个问题,看到你的文章还是不能明白,问题: 1.我是用开发者工具写的代码,你的这个操作是需要在小程序编译前,先自己编译一遍后,再通过开发者工具预览是吗? (如果不是就有第二个问题 ) 2.如果不是1那样,那是什么方法
        茶树菇小学生:@一斤代码 明白了,谢谢
        一斤代码:是的,需要先使用gulp + babel来预编译代码
      • 5c096fd7ce62:const regeneratorRuntime = require('../../libs/regenerator-runtime')
        我在源文件顶部加了这个,在生成的文件中,这行在使用 regeneratorRuntime 的后面,就造成了找不到 regeneratorRuntime ,请问这个有什么好的解决方案?
        5c096fd7ce62:@王通_9e99 我加了一个gulp的pipe,在文件头加入了const regeneratorRuntime = require('../../libs/regenerator-runtime'),解决了这个问题
        5c096fd7ce62:@一斤代码 https://github.com/gushiaoke/wx-async 可以看dist\utils\util.js:56行,源文件是src\utils\util.js
        转换已经关闭
        一斤代码:不应该出现这种顺序问题呀。可以把你的build脚本和page的js代码发一些出来看一下。还有微信开发者工具自己的ES6转ES5的选项已经关闭了吧?
      • af8e67df838e:您好 为什么我按照您这种步骤下去还是不行呀?我安装npm install regenerator这个库的时候,没有regenerator-runtime.js,只有runtime.js和runtime-module.js,require了以后 async需要regeneratorRuntime.asnyc吗,求解答
        一斤代码:1.使用那个runtime.js就是了。

        2.require以后不需要regeneratorRuntime.asnyc,async使用方式按照标准ES7的async方式来直接使用。

        一般就是在需要使用async/await的js文件中,先require或import那个runtime.js:

        var regeneratorRuntime = require("./your/path/of/runtime.js");

        import regeneratorRuntime from "./your/path/of/runtime.js";

        然后在后面的代码里就可以直接使用async, await关键字了。
      • 知晓程序:您自己开发了小程序吗?可以来我们的小程序商店进行提交喔 minapp.com 感谢您一直以来的支持~~

      本文标题:微信小程序中异步处理终极方案async/await

      本文链接:https://www.haomeiwen.com/subject/vlflbttx.html