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));

この関数は、タイマーが期限切れになったときに解決される Promise を返し、簡単にチェーンできるようにします。 Promise.

Promise の連鎖

約束された 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

を使用する別のオプションは、Array.reduce:

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

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 を使用する

この構文は ECMAScript 2017 で使用できます:

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

asyncLoop();

5。 ECMAScript 2020 で導入された for await...of

を使用すると、この構文によりループがさらに簡素化されます。

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

これらのメソッドを活用することで、for ループ内で効果的に Promise を連鎖させることができ、各 Promise は、先行する Promise が解決された後にのみ実行されます。

以上がJavaScript ES6 For ループで Promise を順番に実行するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。