随着 JavaScript 应用的日益复杂和数据规模的增加，异步调用成为了在前端开发中必须面对的问题。然而，异步调用往往会导致调用栈过深，进而导致性能和可维护性的问题。在这篇文章中，我们将介绍 ES10 中的 AsyncGenerator，不仅可以使异步调用更具表现力，而且还可以有效地解决异步调用栈溢出的问题。
异步调用栈溢出的问题
在 JavaScript 中，每次调用函数都会增加调用栈的深度，如果调用次数过多，则可能导致栈溢出，从而导致应用崩溃。异步函数的调用，其实本质上也是一种递归调用。例如，当使用 Promise 实现异步调用时，每次调用 .then() 或 .catch() 都会添加一个新的 Promise，增加调用栈的深度。
-- -------------------- ---- -------
-- ------- -----
----------
-------------- -- -
-- --
------ ---------------------
--
---------- -- -
-- --
------ ------------------------------
--
------------------- -- -
-- --
--
------------ -- -
-- --
--上面的代码中，每次调用 .then() 或 .catch() 都会创建一个新的 Promise，如果使用这种方式嵌套太多层级会导致效率和可维护性的问题。
ES10 AsyncGenerator 简介
ES10 引进 AsyncGenerator 作为新的异步编程模型，它通过生成器函数对异步编程进行支持。AsyncGenerator 函数简单来说是一个生成器函数，接收异步请求并生成结果序列。通过 AsyncGenerator 函数，可以使异步调用更加表现力，代码更具可读性。
AsyncGenerator 的使用也可有效避免引起调用栈过深的问题，因为它可以让每个异步操作在异步执行完成后返回关闭的异步迭代器，使异步调用更加节约内存。
示例
下面是一个使用 AsyncGenerator 的例子：
async function* fetchItems(items) {
for (const item of items) {
yield await fetch(item.url);
}
}上面的代码中，fetchItems 函数接收一个包含 url 的数组，遍历每个元素并返回一个异步迭代器，可以通过 for-await-of 进行迭代，每次返回由 await fetch 函数返回的结果。这种方法可以让我们更加优雅地转化异步调用。
async function displayItems(items) {
for await (const result of fetchItems(items)) {
console.log(result);
}
}上面的代码中，我们使用 for-await-of 迭代返回的异步迭代器，不用等待所有的结果都返回后再进行下一步处理，避免了堆积过多的异步操作。
结论
ES10 AsyncGenerator 是在异步编程中的一种新模型，它可以使异步调用更具表现力，代码更具可读性。同时，它还可以有效地解决异步调用过程中可能出现的调用栈溢出问题。但是需要注意，使用 AsyncGenerator 也需要一定的学习成本。尤其要注意的是，AsyncGenerator 只是异步编程的一种选择，适用于特殊场景的异步编程需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670129a40bef792019b2bb79