美文网首页
ES6学习笔记(20)之 async 函数

ES6学习笔记(20)之 async 函数

作者: 苦苦修行 | 来源:发表于2019-09-30 10:23 被阅读0次

    参考:ECMAScript 6 入门

    使用场景:可以将异步方法以同步的方式执行

    • async 函数是什么?一句话,它就是 Generator 函数的语法糖。async函数就是将 Generator 函数的星号(*)替换成async,将yield替换成await,并在调用 async 函数时按顺序执行异步方法。可以说 async 函数就是 Generator 函数和自动执行器(概念请参照上一篇)的结合。

    • async函数的返回值是 Promise 对象,这比 Generator 函数的返回值是 Iterator 对象方便多了。你可以用then方法指定下一步的操作。

    • 多个await命令后面的异步操作,如果不存在继发关系,最好让它们同时触发。
      错误的写法:

    let foo = await getFoo();
    let bar = await getBar();
    

    正确的写法:

    // 写法一
    let [foo, bar] = await Promise.all([getFoo(), getBar()]);
    
    // 写法二
    let fooPromise = getFoo();
    let barPromise = getBar();
    let foo = await fooPromise;
    let bar = await barPromise;
    
    • 如何正确的使用 async 和 await?
      分析以下代码,看能否按顺序执行,为什么?
    function dbFuc(db) { 
      let docs = [{}, {}, {}];
    
      docs.forEach(async function (doc) {
        await db.post(doc);
      });
    }
    

    正确的写法应该是什么?请见文章最后。

    • 新的提案:(了解就行)
      根据语法规格,目前await命令只能出现在 async 函数内部,否则都会报错。
      目前,有一个语法提案,允许在模块的顶层独立使用await命令。这个提案的目的,是借用await解决模块异步加载的问题(模块间按顺序互相依赖)。
    // x.js
    console.log("X1");
    await new Promise(r => setTimeout(r, 1000));
    console.log("X2");
    
    // y.js
    console.log("Y");
    
    // z.js
    import "./x.js";
    import "./y.js";
    console.log("Z");
    

    打印结果是X1、Y、X2、Z
    顶层的await命令有点像,交出代码的执行权给其他的模块加载,等异步操作完成后,再拿回执行权,继续向下执行。


    思考题答案:

    async function dbFuc(db) {
      let docs = [{}, {}, {}];
    
      for (let doc of docs) {
        await db.post(doc);
      }
    }
    

    相关文章

      网友评论

          本文标题:ES6学习笔记(20)之 async 函数

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