如何在 JavaScript ES6 For 迴圈中序列化 Promise？

JavaScript ES6 Promise For 迴圈序列化

在給定的程式碼中，您嘗試在for 迴圈中順序執行Promise，但

在給定的程式碼中，您嘗試在for 迴圈中順序執行Promise，但遇遇到以下問題：循環同步執行，導致不可預測的輸出。

理解問題：

Promise 封裝了非同步操作，但循環的同步性質會同時觸發所有 Promise，而不管所需的順序。

Promisifying setTimeout：

為了方便順序執行，我們可以promisify setTimeout來獲得一個promise，當定時器到達時就會解析過期：

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

解決方案選項：

有多種方法可以解決這個問題，利用Promise 和非同步程式設計技術。

1.具有初始Promise 的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.初始Promise 的Array.reduce：

使用Array.reduce，您可以建立類似for 迴圈方法的Promise 鏈：

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

3.函數作為Promise 解析回呼：

您可以定義一個將自身傳遞為解析回呼的函數，從而允許遞歸Promise 鏈：

const loop = (i) => {
  delay(Math.random() * 1000)
    .then(() => console.log(i))
    .then(() => {
      if (i < 10) loop(i + 1);
    });
};
loop(0);

4. async/await 語法(ES2017)：

ES2017 引入了async/await 處理語法來簡化

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

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

ES2020 引入了一種特殊的語法來迭代異步可迭代對象：

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

透過利用這些技術，您可以順序執行Promise在循環內，確保所需的操作順序並避免不可預測的輸出。

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