JavaScript ES6 で Promise ループを適切に処理する方法は?

JavaScript ES6 Promise ループ

JavaScript ES6 では、Promise は非同期プログラミングのメカニズムを提供します。ただし、for ループ内で Promise を使用すると、ループの同期的な性質により予期しない動作が発生する可能性があるため、課題が生じます。

非同期 Promise Chaining

各 Promise が確実に実行されるようにするには前任者が解決された後にのみ、非同期プロミス チェーンを実装する必要があります。これには、前の Promise が解決された場合にのみ各 Promise を作成することが含まれます。

setTimeout() による Promise の作成

非同期操作をシミュレートするには、多くの場合 setTimeout() を使用します。ただし、チェーンを効果的に機能させるには、Promise ベースのバージョンの setTimeout() が必要です。 setTimeout() を約束する関数は次のとおりです。

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

ソリューション オプション

約束された setTimeout() を配置すると、内部での非同期 Promise チェーンにいくつかのオプションが利用可能になります。 for ループ:

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

このソリューションは、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 await...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 中国語 Web サイトの他の関連記事を参照してください。