JavaScript 异步编程指南 — 终极解决方案 Async/Await
共 5774字，需浏览 12分钟
·
2021-07-15 03:57
基本使用
函数声明时在 function 关键词之前使用 async 关键字，内部使用 await 替换了 Generator 中的 yield，语义上比起 Generator 中的 * 号也更明确。
在执行时相比 Generator 而言，Async/Await 内置执行器，不需要 co 这样的外部模块，程序语言本身实现是最好的，使用上也更简单。
声明 async 函数
以下是基于 Generator 一讲中的一个例子做了改造，在第二个 await 后面，使用 Promise 封装了下，它本身是支持跟一个 Promise 对象的，这个时候它会等待当 Promise 状态变为 Fulfilled 才会执行下一步，当 Promise 未能正常执行 resolve/reject 时那就意味着，下面的也将得不到执行。
await 后面还可跟上基本类型：数值、字符串、布尔值，但这时也会立即转成 Fulfilled 状态的 Promise。
async function test() {
const res1 = await 'A';
const res2 = await Promise.resolve(res1 + 'B');
const res3 = await res2 + 'C';
return res3;
}
(async () => {
const res = await test(); // ABC
})();
错误管理
如果 await 后面的 Promise 返回一个错误，需要 try/catch 做错误捕获，若有多个 await 操作也可都放在一起。这种情况，假如第一个 await 后面的 Promise 报错，第二个 await 是不会执行的。
这和普通函数操作基本上是一样的，不同的是对于异步函数我们需要加上 await 关键字。
(async () => {
try {
await fetch1(url);
await fetch2(url);
} catch (err) {
// TODO
}
})();
也要注意 await 必须写在 async 函数里，否则会报错 SyntaxError: await is only valid in async functions and the top level bodies of modules。
// 错误的操作
(() => {
await 'A';
})();
这样写也是不行的，在 “协程” 一讲中也提过类似的示例，只不过当时是基于 yield 表达式，async/await 实际上是 Generator 函数的一种语法糖，内部机制是一样的，forEach 里面的匿名函数是一个普通的函数，运行时会被看作是一个子函数，栈式协程是从子函数产生的，而 ES6 中实现的协程属于无堆栈式协程，只能从生成器内部生成。以下代码在运行时会直接失败。
(async () => {
['B', 'C'].forEach(item => {
const res = await item;
console.log(res);
})
})();
想通过 await 表达式正常运行，就要避免使用回调函数，可以使用遍历器 for...of。
(async () => {
for (const item of ['B', 'C']) {
const res = await item; // B C
}
})();
并发执行
当我们拥有多个异步请求，且不必顺序执行时，可以在 await 表达式后使用 Promise.all()，这是一个很好的实践。
(async () => {
await Promise.all([
fetch(url1),
fetch(ur2)
])
})();
通过这个示例可以看出，async/await 也还是基于 Promise 的。
异步迭代
上面讲解的使用 Async/Await 都是基于单次运行的异步函数，在 Node.js 中我们还有一类需求它来自于连续的事件触发，例如，基于流式 API 读取数据，常见的是注册 on('data', callback) 事件和回调函数，但是这样我们不能利用常规的 Async/Await 表达式来处理这类场景。
异步迭代器
异步迭代器与同步迭代器不同的是，一个可迭代的异步迭代器对象具有 [Symbol.asyncIterator] 属性，并且返回的是一个 Promise.resolve({ value, done }) 结果。
实现异步迭代器比较方便的方式是使用声明为 async 的生成器函数，可以使我们像常规函数中一样去使用 await，以下展示了 Node.js 可读流对象是如何实现的异步可迭代，只列出了核心代码，异步迭代器笔者也有一篇详细的文章介绍，很精彩，感兴趣的可以看看 探索异步迭代器在 Node.js 中的使用。
// for await...of 循环会调用
Readable.prototype[SymbolAsyncIterator] = function() {
...
const iter = createAsyncIterator(stream);
return iter;
};
// 声明一个创建异步迭代器对象的生成器函数
async function* createAsyncIterator(stream) {
...
try {
while (true) {
// stream.read() 从内部缓冲拉取并返回数据。如果没有可读的数据，则返回 null
// readable 的 destroy() 方法被调用后 readable.destroyed 为 true，readable 即为下面的 stream 对象
const chunk = stream.destroyed ? null : stream.read();
if (chunk !== null) {
yield chunk; // 这里是关键，根据迭代器协议定义，迭代器对象要返回一个 next() 方法，使用 yield 返回了每一次的值
}
...
}
} catch (err) {
}
}
for...await...of 遍历器
Node.js Stream 模块的可读流对象在 v10.0.0 版本试验性的支持了 [Symbol.asyncIterator] 属性，可以使用 for await...of 语句遍历可读流对象，在 v11.14.0 版本以上已 LTS 支持，这使得我们从流中读取连续的数据块变的很方便。
const fs = require('fs');
const readable = fs.createReadStream('./hello.txt', { encoding: 'utf-8' });
async function readText(readable) {
let data = '';
for await (const chunk of readable) {
data += chunk;
}
return data;
}
(async () => {
try {
const res = await readText(readable);
console.log(res); // Hello Node.js
} catch (err) {
console.log(err.message);
}
})();
使用 **for await...of** 语句遍历 readable，如果循环中因为 break 或 throw 一个错误而终止，则这个 Stream 也将被销毁。
顶级 Await
根据 async 函数语法规则，await 只能出现在 async 异步函数内。对于异步资源，之前我们必须在 async 函数内才可使用 await，这对一些在文件顶部需要实例化的资源可能会不好操作。
在 Node.js v14.x LTS 发布后，已支持顶级 Await 我们可以方便的在文件顶部对这些异步资源做一些初始化操作。
我们可以像下面这样来写，但这种模式也只有在 ES Modules 中才可用。
import fetch from 'node-fetch';
const res = await fetch(url)
总结
JavaScript 编程中大部分操作都是异步编程，Async/Await 可以已同步的方式来书写我们的代码，但是实际执行其还是异步的，这种被方式目前也称为异步编程的终极解决方案。
往期回顾
·END·
汇聚精彩的免费实战教程
喜欢本文，点个“在看”告诉我
