Comment réaliser un chaînage asynchrone avec des promesses en JavaScript ?

Chaînage asynchrone avec des promesses dans JavaScript ES6

L'extrait de code JavaScript fournissait des tentatives de création de promesses dans une boucle, mais échouait en raison de la synchronisation nature de la boucle. Pour résoudre ce problème, nous exigeons que chaque promesse soit créée et résolue séquentiellement, ce qui entraîne un asynchrone.

Il existe plusieurs approches pour réaliser ce chaînage :

Utiliser une boucle For avec un Promesse initiale :

Initialisez une promesse qui se résout immédiatement, puis enchaînez de nouvelles promesses à cette première comme chaque promesse précédente résout.

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

Utilisation d'Array.reduce avec une promesse initiale :

Similaire à l'approche de la boucle for, utilisez Array.reduce pour enchaîner les promesses, en commençant par un promesse initiale.

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

Utilisation d'un chaînage récursif Fonction :

Définissez une fonction qui s'appelle comme un rappel de résolution (comme une chaîne de promesse), en passant l'index actuel comme argument.

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

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

chainPromises();

Utilisation d'Async /Await (ES2017) :

Utilisez async/await pour suspendre l'exécution de la fonction jusqu'à la promesse résout.

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

asyncPromises();

Utilisation de For Await...Of (ES2020) :

Similaire à async/await, utilisez la syntaxe for wait...of pour parcourir un itérable asynchrone.

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!