如何正確處理 JavaScript ES6 中的 Promise 迴圈？

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中文網其他相關文章！