美文网首页
ES7中async + await的用法

ES7中async + await的用法

作者: handsomePeng | 来源:发表于2021-01-07 22:38 被阅读0次

    一、前序

    异步操作是javascript编程的一件麻烦事,麻烦到一直有人提出各种各样的解决方案,试图解决这个问题。但是从最早的回调函数,到Promise对象,再到Generator函数,虽每次都有所改进,却仍旧让人感觉到复杂。而相比上述几种方案,async函数无疑是让我们眼前一亮的解决方案。

    二、async函数是什么

    一句话概括,async函数就是Generator函数的语法糖。

    
    const fs = require('fs')
    
    function readFile (fileName) {
      return new Promise((resolve, reject) => {
        fs.readFile(fileName, (error, data) => {
          if (error) {
            reject(error)
          } else {
            resolve(data)
          }
        })  
      })
    }
    
    /* Generator函数依次读取两个文件 */
    function* gen () {
      const f1 = yield readFile('/etc/fstab')
      const f2 = yield readFile('/etc/shells')
      console.log(f1.toString())
      console.log(f2.toString())
    }
    
    
    /* async函数依次读取两个文件 */
    async function asyncReadFile () {
      const f1 = await readFile('/etc/fstab')
      const f2 = await readFile('/etc/shells')
      console.log(f1.toString())
      console.log(f2.toString())
    }
    
    
    

    比较async函数和generator函数,可以发现async函数就是将generator函数的星号(*)替换成了async, 将yield替换成了await, 仅此而已。

    三、async函数的优点

    • 内置执行器
      async函数的执行,与普通函数一摸一样,只需一行即可完成。
    let result = asyncReadFile()
    
    
    • 语义更清楚。

      • async: 表示函数内存在异步操作
      • await:表示需要等待紧跟在后面的表达式返回结果
    • 实用性更广

      • await:紧跟其后的,可以是Promise对象,也可以是原始类型的值(数值、字符串、布尔值,但此时等同于同步操作)

    四、async函数的实现(了解即可)

    async函数的实现,就是将generator函数和自动执行器,包装在一个函数里。模板如下:

    async function fn (args) {
      // ...
    }
    
    // 等同于 (其中spawn函数就是自动执行器)
    function fn(args) {
      return spawn(function* () {
        // ...
      })
    }
    
    

    五、async函数的用法(重点)

    同generator函数一样,async函数返回一个Pormise对象,故而可以使用then方法添加回调函数。当async函数执行时,一旦遇到await就会先返回等到触发的异步操作完成,才会接着执行函数体后面的语句。

    /* 示例一: 获取股票报价 */
    async function getStockPriceByName(name) {
      var symbol = await getStockSymbol(name);
      var stockPrice = await getStockPrice(symbol);
      return stockPrice;
    }
    
    getStockPriceByName('goog').then(function (result){
      console.log(result);
    });
    
    
    

    上面的示例,函数前面的async关键字,表明该函数内有异步操作。调用该函数时会立即返回一个Promise对象。

    /* 示例二: 指定n毫秒后输出一个值 */
    function timeout(ms) {
      return new Promise((resolve) => {
        setTimeout(resolve, ms);
      });
    }
    
    async function asyncPrint(value, ms) {
      await timeout(ms);
      console.log(value)
    }
    
    asyncPrint('hello world', 50);
    
    

    上面的示例,在50毫秒后,会输出“hello world”

    六、注意点

    • await命令后面的Promise对象,运行结果可能时rejected,故而建议:最好将await命令放在try...catch代码块中

    • await命令只能用在async函数内,若用在普通函数中就会报错

    七、参考文档

    1. async 函数的含义和用法
    2. Generator 函数的含义与用法

    相关文章

      网友评论

          本文标题:ES7中async + await的用法

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