JavaScript ES6 For ループで Promise をシリアル化する方法は?

JavaScript ES6 Promise For ループのシリアル化

指定されたコードで、for ループ内で Promise を順番に実行しようとしましたが、次の問題が発生しました。ループは同期的に実行されるため、予測不能な結果が生じます。 Output.

問題の理解:

Promise は非同期操作をカプセル化しますが、ループの同期的な性質により、必要なシーケンスを無視して、すべての Promise が同時にトリガーされます。

約束するsetTimeout:

順次実行を容易にするために、タイマーが期限切れになったときに解決される Promise を取得するように setTimeout を約束できます:

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. Array.reduce と初期 Promise:

Array.reduce を使用すると、for ループ アプローチと同様の Promise チェーンを作成できます:

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

3. Promise Resolution Callback としての関数:

それ自体を解決コールバックとして渡す関数を定義して、再帰的な 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 await...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 中国語 Web サイトの他の関連記事を参照してください。