如何在 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

2.使用Array.reduce

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

另一個選擇是使用Array.reduce:

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

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

asyncLoop();

4.使用Async / Await

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

4.使用Async / Await

4.使用Async / Await此語法在ECMAScript 2017中可用：5. ECMAScript 2020 中引入了for wait...of，此語法進一步簡化了循環：透過利用這些方法，我們可以在for 迴圈中有效地連結Promise，確保每個承諾僅在其前一個承諾解決後執行。

以上是如何在 JavaScript ES6 For 迴圈中順序執行 Promise？的詳細內容。更多資訊請關注PHP中文網其他相關文章！