在 JavaScript 中，异步迭代是指能够遍历异步序列或集合的能力，比如由异步函数或生成器返回的那些。异步迭代通常用于涉及异步任务的操作，例如从远程服务器获取数据或从文件中读取数据。
理解异步操作
简单来说，在编程中的异步操作指的是在等待完成期间不会阻碍程序执行的任务或过程。这些异步任务使得程序可以在等待当前任务结束的同时继续执行其他任务，而不是暂停等待每一个操作结束后再进行下一个操作。
使用 for await...of 循环
for await...of 循环用于异步迭代。它的工作方式类似于普通的 for...of 循环，但它专为异步迭代器设计。异步迭代器是一个定义了 async next() 方法的对象，该方法返回序列中下一个值的承诺。
示例：使用 Promise
JavaScript 包含了 Promise 特性来管理异步操作；这些 Promise 代表了异步任务的可能结果，无论是完成还是失败。值得注意的是，asyncOperation 函数模拟了这样的任务，通过返回一个 Promise。for await...of 循环优雅地遍历异步序列，强调了在管理非阻塞操作时不牺牲代码清晰性的 Promise 的使用。
<!DOCTYPE html>
<html>
<body>
<h2>带有 Promise 的异步迭代</h2>
<div id="output"></div>
<script>
function asyncOperation(value) {
return new Promise(resolve => {
setTimeout(() => {
document.getElementById('output').innerHTML += `<p>Processed: ${value}</p>`;
resolve(value);
}, 1000);
});
}
const asyncIterable = {
[Symbol.asyncIterator]: async function* () {
for (let i = 1; i <= 3; i++) {
yield await asyncOperation(i);
}
},
};
async function processAsyncIterable() {
for await (const result of asyncIterable) {
document.getElementById('output').innerHTML += `<p>Received: ${result}</p>`;
}
}
processAsyncIterable();
</script>
</body>
</html>
示例 2：使用 Fetch API 进行异步 HTTP 请求
在这里，我们演示了使用 Fetch API 执行 HTTP 请求的异步迭代：asyncIterable 操作以异步方式获取数据。此外，使用 for await...of 循环优雅地遍历结果，展示了异步迭代如何无缝地与外部数据源检索相结合。
<!DOCTYPE html>
<html>
<body>
<h2>带有 Fetch API 的异步迭代</h2>
<div id="output"></div>
<script>
const url = 'https://jsonplaceholder.typicode.com/todos/';
const asyncIterable = {
[Symbol.asyncIterator]: async function* () {
for (let i = 1; i <= 3; i++) {
const response = await fetch(`${url}${i}`);
const data = await response.json();
document.getElementById('output').innerHTML += `<p>Received: ${JSON.stringify(data)}</p>`;
yield data;
}
},
};
async function processAsyncIterable() {
for await (const result of asyncIterable) {
}
}
processAsyncIterable();
</script>
</body>
</html>
示例 3：使用回调
这种方法采用基于回调的机制来实现异步迭代。asyncOperation 函数模仿了一个异步任务并在完成时回调。同时，processAsyncIterable 函数积极地遍历数组，为每一个元素调用异步操作。
<!DOCTYPE html>
<html>
<body>
<h2>带有回调的异步迭代</h2>
<div id="output"></div>
<script>
function asyncOperation(value, callback) {
setTimeout(() => {
document.getElementById('output').innerHTML += `<p>Processed: ${value}</p>`;
callback(value);
}, 1000);
}
function processAsyncIterable(iterable, callback) {
const iterator = iterable[Symbol.iterator]();
function iterate() {
const next = iterator.next();
if (next.done) {
return;
}
const value = next.value;
asyncOperation(value, result => {
document.getElementById('output').innerHTML += `<p>Received: ${result}</p>`;
iterate();
});
}
iterate();
}
const asyncIterable = [5,6,7,8,9,10];
processAsyncIterable(asyncIterable, result => {
});
</script>
</body>
</html>
示例 4：带有错误的 Promise
在 JavaScript 中，.then() 方法使用一个或两个回调函数来管理 Promise 的成功解决：当 Promise 解决时，它执行第一个函数；如果发生拒绝，则执行可选的第二个函数。
.catch() 方法伴随 Promises，特别用于处理 Promise 拒绝。当 Promise 被拒绝时，单个回调函数会被执行；这提供了一个优雅的解决方案来管理异步操作中的错误——消除了专门为错误处理而设的 .then() 块的需求。
<!DOCTYPE html>
<html>
<head>
<style>
#output {
margin-top: 20px;
}
</style>
</head>
<body>
<h2>带有 Promise 的异步迭代</h2>
<button onclick="startAsyncIteration()">开始异步迭代</button>
<div id="output"></div>
<script>
function delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
function fetchData(index) {
return new Promise((resolve, reject) => {
if (index < 5) {
delay(1000).then(() => resolve(`Data ${index}`));
} else {
reject(new Error('Error fetching data for index 5'));
}
});
}
function startAsyncIteration() {
document.getElementById('output').innerHTML = '';
let index = 0;
function iterate() {
fetchData(index)
.then(data => {
displayData(data);
index++;
if (index < 6) {
iterate();
}
})
.catch(error => {
displayError(error.message);
});
}
iterate();
}
function displayData(data) {
const outputDiv = document.getElementById('output');
outputDiv.innerHTML += `<p>Data received: ${data}</p>`;
}
function displayError(errorMessage) {
const outputDiv = document.getElementById('output');
outputDiv.innerHTML += `<p style="color: red;">Error: ${errorMessage}</p>`;
}
</script>
</body>
</html>
现实世界的应用案例
在现实世界的应用场景中，我们将 JavaScript 异步迭代应用于优化各种异步操作：在 Web 应用程序中并发从多个 API 获取数据；处理实时更新——这是聊天系统的关键功能；执行需要大量资源的批量任务或并行任务。此外，这种技术还适用于管理文件操作和流，以及处理交互式网页上的并发用户交互。其他应用包括动态处理来自 IoT 设备的数据，动态加载网页内容，这些同样极大地受益于异步迭代的使用，因为它们需要非阻塞性效率以及在处理复杂任务管理（如离线优先应用程序的数据同步）时的响应性。