随着 JavaScript 语言的发展，在 ES7 中，添加了一个新的 for-await-of 语法，这个语法提供了一种优雅且简洁的方式来处理异步任务的集合。在这篇文章中，我们将学习如何在前端开发中使用 for-await-of 语句，并探讨如何将其应用于异步任务的集合处理。
理解异步任务集合
在异步编程中，我们通常需要处理来自多个异步任务的结果，例如 Promise 集合、异步生成器等。Promise 是异步编程中最常见的概念之一，因为 JavaScript 具有一种 Promise API，它可以返回 Promise 集合。
考虑以下示例：
// javascriptcn.com 代码示例
const fetch = require('node-fetch');
function fetchPosts() {
return Promise.all([
fetch('https://jsonplaceholder.typicode.com/posts/1'),
fetch('https://jsonplaceholder.typicode.com/posts/2'),
fetch('https://jsonplaceholder.typicode.com/posts/3')
]);
}
fetchPosts()
.then(posts => {
console.log(posts[0].json());
console.log(posts[1].json());
console.log(posts[2].json());
})
.catch(err => console.log(err));在此示例中，fetchPosts 函数返回一个包含多个 Promise 的数组。我们使用 Promise.all() 方法并在所有 Promise 均成功解决时调用了它们的可序列化 json() 方法。然后，我们打印每个解构的结果。
但是，这段代码有一个问题：在所有 Promise 被解决之前，我们无法获得数据，因此，我们不能保证打印发生的顺序。这是因为现代浏览器和 Node.js 使用线程池来异步调度异步操作。尽管我们可以编写复杂的代码来保证顺序，但是 for-await-of 语句为此提供了一种更为简洁的方式。
基于 for-await-of 的解决方案
下面让我们看一下如何使用 for-await-of 构造异步任务集合的解决方案。为此，我们将使用 node-fetch 获取数据，并将其转换为可序列化的 JSON。下面是示例代码：
// javascriptcn.com 代码示例
const fetch = require('node-fetch');
async function fetchPosts() {
const urls = [
'https://jsonplaceholder.typicode.com/posts/1',
'https://jsonplaceholder.typicode.com/posts/2',
'https://jsonplaceholder.typicode.com/posts/3'
];
const results = [];
for await (const response of urls.map(url => fetch(url))) {
const json = await response.json();
results.push(json);
}
return results;
}
fetchPosts()
.then(posts => console.log(posts))
.catch(err => console.log(err));在此示例中，我们使用 for-await-of 语法枚举了返回的所有 Promise。由于 fetch 函数返回一个可解决的 Promise，因此我们可以映射给它的每个 URL。在这个例子中，我们使用每个解决的 Promise 从 JSON 数据中提取数据，然后将其推到我们的结果中。
重点是，由于我们使用 for-await-of，因此我们可以确保处理工作始终在异步集合中完成，并且完成顺序基于每个 Promise 的处理顺序。
总结
在本文中，我们了解了如何使用 for-await-of 语句处理异步任务集合，使其优雅而简洁。这种方法适用于在出现多个异步任务时，处理结果的情况。通过使用 for-await-of 语句，我们可以避免使用繁琐的 Promise 编程模式，并能够更清晰、更为优雅地处理异步任务集合。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6548142c7d4982a6eb2643a9