如何在 JavaScript 中使用 Promise 实现异步链接？

JavaScript ES6 中使用 Promise 进行异步链接

提供的 JavaScript 代码片段尝试在循环内创建 Promise，但由于同步而失败循环的性质。为了解决这个问题，我们要求按顺序创建和解析每个 Promise，从而实现异步。

有多种方法可以实现此链接：

使用 For 循环和初始 Promise：

初始化一个立即解决的 Promise，然后将新的 Promise 作为每个先前的 Promise 链接到此初始 Promise

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

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

将 Array.reduce 与初始 Promise 结合使用：

与 for 循环方法类似，使用 Array.reduce 来链接 Promise，从一个初始 Promise 开始最初的承诺。

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

递归地使用链接函数：

定义一个函数，将自身调用为解析回调（如承诺链），并将当前索引作为参数传递。

const chainPromises = (i = 0) => {
    if (i >= 10) return;

    delay(Math.random() * 1000).then(() => {
        console.log(i);
        chainPromises(i + 1);
    });
};

chainPromises();

使用Async/Await (ES2017):

使用 async/await 暂停执行

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

asyncPromises();

使用 For Await...Of (ES2020):

与 async/await 类似，使用 for await.. .of 语法来迭代异步可迭代。

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

asyncPromises();

以上是如何在 JavaScript 中使用 Promise 实现异步链接？的详细内容。更多信息请关注PHP中文网其他相关文章！