Maison >interface Web >js tutoriel >Quelle est la différence entre Promise Chaining et Aync/await

Quelle est la différence entre Promise Chaining et Aync/await

Linda Hamilton
Linda Hamiltonoriginal
2024-11-16 15:47:02332parcourir

Qual a diferença de Encadeamento de Promises e Aync/await

Aujourd'hui, j'ai été confronté à ma propre ignorance quant à la différence entre ces deux façons de gérer les opérations asynchrones, j'ai donc décidé de lire et de faire des recherches pour écrire cet article - pour me rappeler et, qui sait, peut-être aider d'autres développeurs à mieux comprendre cette différence.

À l'époque, je savais plus ou moins comment expliquer qu'ils faisaient tous les deux la même chose, avec then() amenant les données résolues, tandis que résoudre et rejet servaient à terminer par un succès ou une erreur. Async/await devait attendre le résultat avant de passer à l'étape suivante. Ce n'était pas complètement faux, mais cela pourrait être expliqué d'une bien meilleure manière.

Promesse

La promesse, comme son nom l'indique, est une « promesse » de retour de données qui passe par trois états principaux :

  1. En attente : État initial, lorsque la promesse n'a pas encore été résolue ou rejetée.
  2. Réalisé : L'opération s'est terminée avec succès.
  3. Rejeté : l'opération a échoué et l'erreur a été détectée.
const minhaPromise = new Promise((resolve, reject) => {
  let sucesso = true; // Apenas um exemplo condicional

  if (sucesso) {
    resolve("Operação concluída com sucesso!");
  } else {
    reject("Ocorreu um erro na operação.");
  }
});

Enchaînement de promesses

C'était la manière la plus courante de gérer les promesses avant l'async/wait. Nous utilisons les méthodes then(), catch() et enfin().

  • then() : utilisé pour recevoir et manipuler les données résolues avec succès.
  • catch() : Utilisé pour gérer l'erreur lorsque la promesse est rejetée.
  • finally() : Utilisé pour exécuter du code quel que soit le résultat.
minhaPromise
  .then((mensagem) => {
    console.log(mensagem); // "Operação concluída com sucesso!"
  })
  .catch((erro) => {
    console.error(erro); // Se der erro, isso será executado.
  })
  .finally(() => {
    console.log("Finalizando a execução da Promise"); // Sempre será executado.
  });

Asynchrone/Attente

Une fonction marquée async renvoie automatiquement une promesse, et await est utilisée pour "mettre en pause" l'exécution jusqu'à ce que la promesse soit résolue.

async function buscarDados() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
    const data = await response.json();
    console.log("Dados recebidos:", data);
  } catch (error) {
    console.error("Erro ao buscar dados:", error);
  }
}

buscarDados();

La différence

L'enchaînement des promesses peut rendre le code très imbriqué, surtout lorsque nous en utilisons plusieurs then() à la suite, ce qui rend la lecture plus difficile.

Async/await vous permet d'écrire du code asynchrone d'une manière plus similaire au code synchrone, rendant la logique plus facile à lire et à comprendre. Le code devient plus propre, surtout lorsque nous devons gérer plusieurs opérations asynchrones.

De plus, la façon de gérer les erreurs en utilisant try/catch avec async/await est plus intuitive que la simple utilisation de catch dans Promises.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn