在现代化的 Web 应用中，异步函数和迭代器已经成为了 JavaScript 中不可或缺的要素。而在 ES9（ECMAScript 2018）中，异步函数和迭代器被进一步组合在一起，允许开发者使用异步函数作为异步迭代器的参数，从而使得异步操作变得更加方便和易于管理。在本文中，我们将深入探讨 ES9 中的异步参数和异步迭代器，结合实际的示例代码，阐述它们的学习以及指导意义。
异步参数
ES9 引入了异步参数这个观念，它允许我们在使用异步迭代器时可以直接在参数中调用一个异步函数。在以前的版本中，我们只能通过间接的方式来处理异步操作。
以下是一个示例代码，展示了一个使用异步参数的异步操作：
// javascriptcn.com 代码示例
async function* fetchUrls(urls) {
for (const url of urls) {
yield await fetch(url);
}
}
(async () => {
const urls = ["https://example.com", "https://google.com", "https://bing.com"];
for await (const response of fetchUrls(urls)) {
console.log(response.status);
}
})();在这个示例中，我们创建了一个异步函数 fetchUrls，它接受一个 urls 数组作为参数，并以异步迭代器的形式返回这些 URL 对应的响应。在迭代器内部，我们直接通过 await 关键字来等待响应，这就是异步参数的使用场景。
值得注意的是，在上面的代码中，我们使用了 async function* 来定义一个异步的迭代器。这是 ES9 新增的语法，它允许我们在迭代器内部直接使用 await 关键字。此外，我们还使用了 for await...of 循环来遍历异步迭代器，这也是 ES9 引入的新特性。
异步迭代器
除了异步参数外，ES9 还引入了异步迭代器这一重要概念。异步迭代器允许我们在异步操作完成前等待迭代器的下一个值。如果我们需要在迭代器返回下一个值时执行一些异步操作，那么异步迭代器就非常实用。
以下是一个示例代码，展示了异步迭代器的实际应用：
// javascriptcn.com 代码示例
async function* fetchUrls(urls) {
for (const url of urls) {
const response = await fetch(url);
if (response.ok) {
yield response.json();
} else {
yield { error: true, message: `${response.status}: ${response.statusText}` };
}
}
}
(async () => {
const urls = ["https://example.com", "https://google.com", "https://bing.com"];
for await (const data of fetchUrls(urls)) {
if (data.error) {
console.error(data.message);
} else {
console.log(data);
}
}
})();在这个示例中，我们同样定义了一个异步函数 fetchUrls，它以异步迭代器的形式返回 URL 对应的数据。在迭代器内部，我们使用 await 关键字来等待响应，并根据响应状态返回相应的数据。我们可以看到，在返回错误信息时，我们直接在迭代器内部构造了一个对象并返回，而不必使用 throw 关键字抛出一个异常。
在 for await...of 循环中，我们在迭代器返回下一个值时执行一些操作，这个操作可能是一个异步操作。当我们能够确保前一个异步操作完成后再返回下一个值时，异步迭代器就非常适用。
总结
在 ES9 中，异步参数和异步迭代器被进一步组合在一起，允许我们更加方便地使用异步操作和迭代器。通过异步参数，我们可以直接在参数中调用一个异步函数，这使得处理异步操作变得更加方便。而异步迭代器则允许我们在异步操作完成前等待迭代器的下一个值，这在需要执行异步操作时非常实用。
在实际的开发中，我们可以将异步参数和异步迭代器的知识结合在一起，从而更加高效地处理异步操作。希望本文能够帮助你深入了解 ES9 中的异步参数和异步迭代器，为你的开发工作提供指导。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65348c517d4982a6eb9452f1