Tutoriel : Implémentation de Polyfills Promise.allSettled From Scratch en JavaScript

JavaScript a introduit Promise.allSettled dans ES2020 pour faciliter le travail avec plusieurs opérations asynchrones. Contrairement à Promise.all, qui court-circuite lorsqu'une promesse est rejetée, Promise.allSettled garantit que vous obtenez des résultats pour toutes les promesses, qu'elles réussissent ou échouent.

Dans ce didacticiel, je vais vous guider dans la création de votre propre implémentation de Promise.allSettled, en me concentrant sur sa construction à partir de zéro. Nous explorerons également le fonctionnement des promesses en coulisses, vous aidant ainsi à comprendre le comportement asynchrone qui rend JavaScript si puissant.

Qu’est-ce que Promise.allSettled ?

Avant de nous lancer dans l'écriture de code, décomposons ce que fait Promise.allSettled :

• Entrée : Un tableau de promesses.
• Sortie : une promesse qui se résout une fois que toutes les promesses d'entrée ont été réglées (soit remplies, soit rejetées), avec un tableau d'objets décrivant le résultat de chaque promesse.

Chaque objet du tableau contient :

• statut : "réalisé" ou "rejeté".
• valeur : La valeur si la promesse est résolue, ou la raison si elle est rejetée. Exemple:

const promises = [
  Promise.resolve('Success'),
  Promise.reject('Failure'),
  Promise.resolve('Complete')
];

Promise.allSettled(promises).then(results => {
  console.log(results);
});

Sortie :

[
  { status: 'fulfilled', value: 'Success' },
  { status: 'rejected', reason: 'Failure' },
  { status: 'fulfilled', value: 'Complete' }
]

Cette méthode est idéale lorsque vous devez attendre que toutes les promesses se terminent, qu'elles réussissent ou échouent.

Pourquoi implémenter Promise.allSettled vous-même ?

Même si cette fonctionnalité est désormais disponible dans les navigateurs modernes, sa mise en œuvre vous-même offre une compréhension plus approfondie du fonctionnement des promesses JavaScript. De plus, il garantit la compatibilité avec les environnements plus anciens qui ne prennent pas en charge les fonctionnalités ES2020 de manière native.

Guide étape par étape pour implémenter Promise.allSettled

Nous allons créer une fonction nommée allSettled qui imite le comportement de Promise.allSettled. Construisons cela étape par étape :

Étape 1 : Créer une fonction Wrapper

La fonction prend un tableau de promesses et renvoie une nouvelle promesse. Cette nouvelle promesse sera résolue lorsque toutes les promesses d'entrée seront réglées (soit résolues, soit rejetées).

function allSettled(promises) {
  // This will return a new promise that resolves when all promises settle
  return new Promise((resolve) => {
    // Implementation goes here
  });
}

Étape 2 : Gérer chaque promesse

Pour chaque promesse du tableau, nous devons savoir si elle est résolue ou rejetée. Nous envelopperons chaque promesse avec un .then() et un .catch() pour capturer son statut :

function allSettled(promises) {
  return new Promise((resolve) => {
    let results = [];
    let count = 0;

    promises.forEach((promise, index) => {
      // Wrap the promise with a .then() and .catch() to capture the result
      promise
        .then((value) => {
          results[index] = { status: 'fulfilled', value };
        })
        .catch((reason) => {
          results[index] = { status: 'rejected', reason };
        })
        .finally(() => {
          count++;
          // Once all promises have settled, resolve the outer promise
          if (count === promises.length) {
            resolve(results);
          }
        });
    });
  });
}

Explication:

1. Créer la promesse extérieure :

La fonction allSettled renvoie une nouvelle promesse. Cette promesse sera résolue lorsque toutes les promesses d'entrée seront réglées.

2. Boucler les promesses :

Nous parcourons le tableau des promesses en utilisant .forEach. Pour chaque promesse, nous suivons son résultat avec .then() (pour les promesses résolues) et .catch() (pour les promesses rejetées).

3. Résultats d'enregistrement :

Le résultat de chaque promesse est stocké dans le tableau des résultats. Si la promesse est résolue, l'objet contient { status: 'fulfilled', value }. S'il rejette, il stocke {statut : 'rejeté', motif }.

4. Compter les promesses tenues :

Nous utilisons une variable de comptage pour suivre le nombre de promesses réglées. Chaque fois qu'une promesse se termine (soit via .then() ou .catch()), nous incrémentons le décompte. Une fois que le nombre est égal à la longueur du tableau d'entrée, nous résolvons la promesse externe avec le tableau de résultats.

Étape 3 : tester notre fonction allSettled

Maintenant, testons cette implémentation personnalisée :

const promises = [
  Promise.resolve('Success'),
  Promise.reject('Failure'),
  Promise.resolve('Complete')
];

Promise.allSettled(promises).then(results => {
  console.log(results);
});

Sortie :

[
  { status: 'fulfilled', value: 'Success' },
  { status: 'rejected', reason: 'Failure' },
  { status: 'fulfilled', value: 'Complete' }
]

Comme prévu, la fonction attend que toutes les promesses soient réglées et le tableau des résultats nous donne des informations détaillées sur chaque promesse, y compris si elle est résolue ou rejetée.

Un examen plus approfondi des promesses

Pour renforcer la compréhension, décomposons le fonctionnement des promesses :

• Les promesses représentent le résultat éventuel d'une opération asynchrone. Lorsqu'une promesse est créée, elle est dans un état en attente.
• Une promesse peut être :

Résolu (réalisé) lorsque l'opération se termine avec succès.

Rejeté en cas d'échec de l'opération.

Réglé lorsqu'il est soit rempli, soit rejeté

La méthode then() nous permet de spécifier une fonction à exécuter lorsque la promesse est résolue, tandis que catch() nous permet de gérer les rejets. L'utilisation de final() garantit que nous gérons le règlement de la promesse (succès ou échec) sans duplication.

Conclusion

Mise en œuvre de Promise.allSettled yourself est un moyen fantastique de comprendre comment les promesses fonctionnent à un niveau fondamental. Ce qu'il faut retenir, c'est que Promise.allSettled attend que toutes les promesses se terminent, contrairement à Promise.all, qui s'arrête lorsqu'il rencontre un rejet.

En implémentant cela à partir de zéro, vous avez également appris à gérer plusieurs opérations asynchrones de manière propre et efficace. Vous pouvez désormais utiliser ces connaissances pour travailler avec des promesses dans n'importe quel environnement JavaScript, y compris ceux qui ne prennent pas en charge nativement les fonctionnalités modernes.

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!