如何在 JavaScript ES6 For 循环中顺序执行 Promise？

JavaScript ES6 Promise for Loop

在编程中，一个常见的任务是迭代集合并对每个元素执行异步操作。在 JavaScript ES6 中，Promise 提供了实现这一目标的强大方法。然而，确保每个 Promise 仅在前一个 Promise 之后执行可能具有挑战性。

在提供的代码片段中，for 循环同步创建所有 Promise，从而产生随机输出。我们的目标是让每个 Promise 顺序运行 (.then())。

承诺 setTimeout

为了改进我们的代码，让我们创建一个 setTimeout 的承诺版本：

const delay = ms => new Promise(resolve => setTimeout(resolve, ms));

此函数返回一个承诺，该承诺在计时器到期时解析，使我们能够轻松链接

链接 Promises

通过 Promisified setTimeout，存在多种方法来实现所需的链接：

1。通过 for

使用 for 循环，创建一个初始立即解析的 Promise 并按照之前的 Promise 的解析链接新的 Promise：

for (let i = 0, p = Promise.resolve(); i < 10; i++) {
    p = p.then(() => delay(Math.random() * 1000))
         .then(() => console.log(i));
}

2.使用 Array.reduce

另一种选择是使用 Array.reduce:

[...Array(10)].reduce((p, _, i) => p.then(() => delay(Math.random() * 1000))
                               .then(() => console.log(i)), Promise.resolve());

3.使用递归函数

也可以使用递归函数：

const loopPromise = (i, p) => {
    if (i >= 10) {
        return;
    }
    p.then(() => delay(Math.random() * 1000))
     .then(() => console.log(i))
     .then(() => loopPromise(i + 1, p));
};

loopPromise(0, Promise.resolve());

4.使用 Async / Await

此语法在 ECMAScript 2017 中可用：

async function asyncLoop() {
    for (let i = 0; i < 10; i++) {
        await delay(Math.random() * 1000);
        console.log(i);
    }
}

asyncLoop();

5. ECMAScript 2020 中引入了 for wait...of

，此语法进一步简化了循环：

for await (let i of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]) {
    await delay(Math.random() * 1000);
    console.log(i);
}

通过利用这些方法，我们可以在 for 循环中有效地链接 Promise，确保每个承诺仅在其前一个承诺解决后执行。

以上是如何在 JavaScript ES6 For 循环中顺序执行 Promise？的详细内容。更多信息请关注PHP中文网其他相关文章！