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
Libérer: 2024-11-16 15:47:02
original
335 Les gens l'ont consulté

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.");
  }
});
Copier après la connexion

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.
  });
Copier après la connexion

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();
Copier après la connexion

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!

source:dev.to
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal