JavaScript 是一种以其异步功能而闻名的语言，在处理异步操作时尤其表现出色。随着 async/await 语法的出现，处理异步代码变得更加简单和可读。然而，在 JavaScript 中将 async/await 与不同类型的循环集成可能很棘手，但这对于高效的代码执行至关重要。在这篇博文中，我们将探讨如何在 JavaScript 中将 async/await 与各种循环结构结合使用。
了解异步/等待
在深入循环之前，让我们快速回顾一下 async/await 是什么。异步函数是一个知道如何预期使用await 关键字调用异步代码的可能性的函数。await 关键字在 Promise 之前使用，它使 JavaScript 等待，直到 Promise 解决，然后返回其结果。
1.For循环
传统的 for 循环是迭代一系列元素的最直接的方法。与 async/await 结合使用时，它允许顺序执行异步任务。
代码语言：js复制async function processArray(array) {
for (let i = 0; i < array.length; i ) {
await someAsyncFunction(array[i]);
}
}在此模式中，数组中的每个元素都会依次等待 someAsyncFunction。这可确保每个异步操作在下一个异步操作开始之前完成。
2. For…Of 循环
for...of 循环是一种更现代的方法，特别适合迭代可迭代对象，例如数组或字符串。它更干净，并且可以与 async/await 无缝协作。
代码语言：js复制async function processIterable(iterable) {
for (const item of iterable) {
await someAsyncFunction(item);
}
}该循环保持顺序执行，确保每个 Promise 在移至下一个 Promise 之前得到解决。
3.forEach方法
虽然 .forEach() 是一种流行的迭代数组元素的方法，但它不能直接与 async/await 配合使用，因为 .forEach() 不会等待 Promise 解决。
代码语言：js复制async function processArrayWithForEach(array) {
array.forEach(async (item) => {
await someAsyncFunction(item);
});
}在这种情况下，几乎同时而不是顺序地为所有数组元素调用 someAsyncFunction。如果需要顺序执行，这可能是不可取的。
4.While循环
while 循环对于事先未知迭代次数的情况很有用。通过async/await，它可以以顺序的方式处理异步操作。
代码语言：js复制async function processWithWhile(array) {
let index = 0;
while (index < array.length) {
await someAsyncFunction(array[index]);
index ;
}
}此模式确保每个异步调用在下一次迭代开始之前完成。
5. Do…While 循环
与 while 循环类似，但在循环体之后检查条件，do…while 循环也可以与 async/await 一起使用。
代码语言：js复制async function processWithDoWhile(array) {
let index = 0;
do {
await someAsyncFunction(array[index]);
index ;
} while (index < array.length);
}这确保了在检查条件之前至少调用异步函数一次。
6. 将 Promise.all 与循环一起使用
对于想要并行运行异步操作然后等待所有异步操作完成的场景，Promise.all 是理想的选择。
代码语言：js复制async function processInParallel(array) {
await Promise.all(array.map(item => someAsyncFunction(item)));
}这种方法对于非依赖异步任务非常有效，因为它显着减少了等待时间。
结论
将 async/await 合并到 JavaScript 中不同类型的循环中需要了解异步操作的性质和所需的执行流程。当任务依赖于前一个任务的结果时，顺序执行至关重要，而使用 Promise.all 并行执行对于独立任务更有效。通过选择正确的循环结构并了解它如何与 async/await 交互，您可以编写更高效、更易读的异步 JavaScript 代码。
我正在参与2024腾讯技术创作特训营第五期有奖征文，快来和我瓜分大奖！
