如何正确处理 JavaScript ES6 中的 Promise 循环？-js教程-PHP中文网

如何正确处理 JavaScript ES6 中的 Promise 循环？

Patricia Arquette

发布： 2024-11-23 21:06:13

原创

536 人浏览过

How to Properly Handle Promise Looping in JavaScript ES6?

JavaScript ES6 Promise 循环

在 JavaScript ES6 中，Promise 提供了一种异步编程的机制。然而，在 for 循环中使用 Promise 是一个挑战，因为循环的同步性质可能会导致意外行为。

异步 Promise 链

确保每个 Promise 都运行只有在解决了它的前身之后，我们才需要实现异步承诺链。这涉及到仅当前一个承诺已解决时才创建每个承诺。

使用 setTimeout() 创建 Promise

为了模拟异步操作，我们经常使用 setTimeout()。然而，为了使链接有效地工作，我们需要一个基于 Promise 的 setTimeout() 版本。这是一个承诺 setTimeout() 的函数：

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

登录后复制

解决方案选项

使用承诺的 setTimeout() 后，可以使用多个选项用于异步承诺链接for 循环：

1。具有初始 Promise 的 for 循环：

此方法使用以立即解析的 Promise 开始的 for 循环。每次迭代都会根据前一次的结果链接一个新的 Promise。

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

登录后复制

2.具有初始 Promise 的 Array#reduce：

此解决方案使用 Array#reduce 迭代一系列值，并根据每个步骤的结果创建 Promise。

const delayAndLog = (acc, i) => acc.then(() => delay(Math.random() * 1000))
         .then(() => console.log(i));

[...Array(10).keys()].reduce(delayAndLog, Promise.resolve());

登录后复制

3。具有 Promise 解析的递归函数：

此方法涉及一个在 then 回调中调用自身的函数。当下一次迭代准备好时，每次调用都会解析生成的 Promise。

let i = 0;
const loop = () => delay(Math.random() * 1000)
        .then(() => console.log(i++))
        .then(loop);

loop().then(() => {});

登录后复制

4. async/await (ES2017):

ES2017 引入了 async/await，它允许更简洁的异步代码。

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

loop();

登录后复制

5. for wait...of (ES2020):

ES2020 引入了await...of 语法，简化了异步迭代。

async function* loop() {
    for (let i of [...Array(10).keys()]) {
        yield await delay(Math.random() * 1000);
    }
}

for await (const i of loop()) {
    console.log(i);
}

登录后复制

这些解决方案确保每个 Promise该循环仅在前一个循环根据需要得到解决后运行。

以上是如何正确处理 JavaScript ES6 中的 Promise 循环？的详细内容。更多信息请关注PHP中文网其他相关文章！