JavaScript で Promise を使用した非同期チェーンを実現するにはどうすればよいですか?

JavaScript ES6 での Promise による非同期チェーン

提供された JavaScript コード スニペットは、ループ内で Promise を作成しようとしますが、同期のため失敗します。ループの性質。これに対処するには、各 Promise を順番に作成して解決する必要があり、非同期になります。

この連鎖を実現するには、いくつかのアプローチがあります。

初期 Promise:

すぐに解決される Promise を初期化し、この最初の Promise に新しい Promise をチェーンします。以前の各 Promise が解決されます。

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

for (let i = 0, p = Promise.resolve(); i < 10; i++) {
    p = p.then(() => delay(Math.random() * 1000))
         .then(() => console.log(i));
}

Initial Promise での Array.reduce の使用:

for ループのアプローチと同様に、Array.reduce を使用して Promise を連鎖させます。最初の Promise から始めます。

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

再帰的に連鎖する関数:

現在のインデックスを引数として渡し、解決コールバック (プロミス チェーンのような) として自分自身を呼び出す関数を定義します。

const chainPromises = (i = 0) => {
    if (i >= 10) return;

    delay(Math.random() * 1000).then(() => {
        console.log(i);
        chainPromises(i + 1);
    });
};

chainPromises();

Async/Await の使用 (ES2017):

async/await を使用して、 Promise が解決されるまで関数の実行を一時停止します。

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

asyncPromises();

Using For Await...Of (ES2020):

async/await と同様に、次を使用します。非同期イテラブルを反復するための for await... 構文。

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

asyncPromises();

以上がJavaScript で Promise を使用した非同期チェーンを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。