ES7中async + await的用法

2021-01-07 本文已影响0人 handsomePeng

一、前序

异步操作是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函数内，若用在普通函数中就会报错