JavaScript 中用于异步/等待调用的不同类型的循环

JavaScript 是一种以其异步功能而闻名的语言，在处理异步操作时尤其表现出色。随着 async/await 语法的出现，处理异步代码变得更加简单和可读。然而，在 JavaScript 中将 async/await 与不同类型的循环集成可能很棘手，但这对于高效的代码执行至关重要。在这篇博文中，我们将探讨如何在 JavaScript 中将 async/await 与各种循环结构结合使用。

了解异步/等待

在深入循环之前，让我们快速回顾一下 async/await 是什么。异步函数是一个知道如何预期使用await 关键字调用异步代码的可能性的函数。await 关键字在 Promise 之前使用，它使 JavaScript 等待，直到 Promise 解决，然后返回其结果。

1.For循环

传统的 for 循环是迭代一系列元素的最直接的方法。与 async/await 结合使用时，它允许顺序执行异步任务。

async function processArray(array) {
    for (let i = 0; i < array.length; i++) {
        await someAsyncFunction(array[i]);
    }
}

在此模式中，数组中的每个元素都会依次等待 someAsyncFunction。这可确保每个异步操作在下一个异步操作开始之前完成。

2. For…Of 循环

for...of 循环是一种更现代的方法，特别适合迭代可迭代对象，例如数组或字符串。它更干净，并且可以与 async/await 无缝协作。

async function processIterable(iterable) {
    for (const item of iterable) {
        await someAsyncFunction(item);
    }
}

该循环保持顺序执行，确保每个 Promise 在移至下一个 Promise 之前得到解决。

3.forEach方法

虽然 .forEach() 是一种流行的迭代数组元素的方法，但它不能直接与 async/await 配合使用，因为 .forEach() 不会等待 Promise 解决。

async function processArrayWithForEach(array) {
    array.forEach(async (item) => {
        await someAsyncFunction(item);
    });
}

在这种情况下，几乎同时而不是顺序地为所有数组元素调用 someAsyncFunction。如果需要顺序执行，这可能是不可取的。

4.While循环

while 循环对于事先未知迭代次数的情况很有用。通过async/await，它可以以顺序的方式处理异步操作。

async function processWithWhile(array) {
    let index = 0;
    while (index < array.length) {
        await someAsyncFunction(array[index]);
        index++;
    }
}

此模式确保每个异步调用在下一次迭代开始之前完成。

5. Do…While 循环

与 while 循环类似，但在循环体之后检查条件，do…while 循环也可以与 async/await 一起使用。

async function processWithDoWhile(array) {
    let index = 0;
    do {
        await someAsyncFunction(array[index]);
        index++;
    } while (index < array.length);
}

这确保了在检查条件之前至少调用异步函数一次。

6. 将 Promise.all 与循环一起使用

对于想要并行运行异步操作然后等待所有异步操作完成的场景，Promise.all 是理想的选择。

async function processInParallel(array) {
    await Promise.all(array.map(item => someAsyncFunction(item)));
}

这种方法对于非依赖异步任务非常有效，因为它显着减少了等待时间。

结论

将 async/await 合并到 JavaScript 中不同类型的循环中需要了解异步操作的性质和所需的执行流程。当任务依赖于前一个任务的结果时，顺序执行至关重要，而使用 Promise.all 并行执行对于独立任务更有效。通过选择正确的循环结构并了解它如何与 async/await 交互，您可以编写更高效、更易读的异步 JavaScript 代码。

我正在参与2024腾讯技术创作特训营第五期有奖征文，快来和我瓜分大奖！