Promesses Explorando : .all contre .allSettled / .race contre .any

Des promesses ont émergé en 2015, avec la sortie de la spécification JavaScript ECMAScript 6 (ES2015), pour rendre notre expérience en tant que développeur moins compliquée lorsqu'il s'agit d'opérations asynchrones.

Si vous étudiez ou travaillez avec JavaScript, vous avez probablement déjà utilisé un Promise.all() ou un Promise.race(). Et pour faciliter encore plus la vie des développeurs, avec la sortie de versions plus récentes de JavaScript, nous avons accès à deux nouvelles méthodes Promises : Promise.allSettled() et Promise.any() (ES11 et ES2021, respectivement).

Mais quelle est la différence entre eux et quand devons-nous utiliser chacun d'eux ?

Résumé

Promise.all vs Promise.allSettled : focus sur le résultat
Promise.race vs Promise.any : focus sur la vitesse

Promise.all vs Promise.allSettled : focus sur le résultat

Imaginez que vous développez une application qui, à un moment donné, doit exécuter différents appels d'API. Si ces appels sont indépendants les uns des autres, une bonne option serait de exécuter tous les appels simultanément, améliorant les performances de l'application, en plus de rendre le code plus concis.

Promesse.all()

• Reçoit un tableau de promesses comme argument ;
• Exécute les opérations simultanément (en parallèle);
• Résoudre lorsque toutes les promesses sont résolues avec succès ;
• Rejete immédiatement si l'une des promesses échoue, bloquant l'exécution des promesses suivantes.

async function buscarDadosParalelo() {  
  const [usuarios, produtos] = await Promise.all([
    fetch('/api/usuarios').then(resp => resp.json()),
    fetch('/api/produtos').then(resp => resp.json()),
  ]);

  return { usuarios, produtos };
}

Promise.all() est très utile lorsque vous devez vous assurer que toutes les promesses réussissent et que la fonction reçoit tous les résultats dont elle a besoin avant d'effectuer une autre action

Reçoit également un
• tableau de promesses comme argument ;
Exécute également des opérations simultanément (en parallèle);
Résout lorsque toutes les promesses terminent leur exécution, qu'elles soient réussies ou échouées, en renvoyant un objet pour chaque promesse contenant son statut (réalisée ou rejetée) ;
Ne rejette jamais et, par conséquent, ne bloque pas l'exécution des Promesses.

async function buscarDadosParaleloComFalhas() {   
  const resultados = await Promise.allSettled([
    fetch('/api/usuarios').then(resp => resp.json()),
    fetch('/api/produtos').then(resp => resp.json()),
  ]);

    // Verificar cada resultado individualmente:
  const dados = resultados.map(resultado => {
    if (resultado.status === 'fulfilled') {
      return resultado.value;
    } else {
      console.error(resultado.reason);
      return null;
    }
  });

  return dados;
}

Promise.allSettled() ne bloque pas l'application si une promesse se termine par un échec, en plus de permet un traitement individuel du succès ou de l'erreur de chaque appel. C'est comme un rapport de situation, qui attend que toutes les demandes soient résolues ou rejetées et permet à l'utilisateur d'évaluer et de traiter chaque cas.

Retour au résumé

Promise.race vs Promise.any : focus sur la vitesse

D'un autre côté, lorsque nous parlons de Promise.race() et Promise.any(), nous parlons d'approches pour gérer la première réponse dans un ensemble d'opérations asynchrones.

Promesse.race()

• Gagnez une gamme de promesses scénarisées ;
• Exécute les opérations simultanément (en parallèle);
• Renvoie la première promesse terminée OU rejetée.

async function buscarDadosParalelo() {  
  const [usuarios, produtos] = await Promise.all([
    fetch('/api/usuarios').then(resp => resp.json()),
    fetch('/api/produtos').then(resp => resp.json()),
  ]);

  return { usuarios, produtos };
}

Promise.race() est très utile lorsque nous avons besoin d'une réponse rapide — le premier retour disponible, qu'il s'agisse d'un succès ou d'une erreur. Il est également largement utilisé avec les timeouts, comme dans l'exemple ci-dessus, pour garantir que nous obtenons une réponse dans un délai imparti et pouvons empêcher les requêtes lentes de continuer à consommer des ressources.

Promesse.any()

• Vous obtenez également un tableau de promesses scriptées ;
• Exécute les opérations simultanément (en parallèle);
• Renvoie la première promesse terminée avec succès, en ignorant les refus ;
• Rejette uniquement si toutes les promesses sont rejetées.

async function buscarDadosParaleloComFalhas() {   
  const resultados = await Promise.allSettled([
    fetch('/api/usuarios').then(resp => resp.json()),
    fetch('/api/produtos').then(resp => resp.json()),
  ]);

    // Verificar cada resultado individualmente:
  const dados = resultados.map(resultado => {
    if (resultado.status === 'fulfilled') {
      return resultado.value;
    } else {
      console.error(resultado.reason);
      return null;
    }
  });

  return dados;
}

Promise.any() est utile lorsque vous avez besoin d'au moins une des demandes pour se terminer avec succès, étant idéal pour les replis et les redondances, comment charger une ressource depuis plusieurs sources (CDN, local, etc.) ou se connecter à différents serveurs en cas de panne.

Retour au résumé

Dans un monde numérique de plus en plus asynchrone, comprendre comment gérer plusieurs opérations simultanées en JavaScript est devenu une compétence essentielle pour les développeurs. Dans cet article, nous explorons quelques méthodes importantes de Promesses avec quelques exemples, montrant comment chacune d'elles fonctionne et, plus important encore, quand et pourquoi vous devriez choisir l'une plutôt que l'autre.

À la prochaine fois (et Je le prometsJe serai bientôt de retour) !

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!