Rappels, promesses, Async/Await : comparaison détaillée

Présentation :
La programmation asynchrone est la pierre angulaire du développement JavaScript moderne, permettant aux tâches d'être exécutées simultanément sans bloquer le thread principal. Au fil du temps, JavaScript a évolué avec des solutions plus élégantes pour gérer les opérations asynchrones. Dans cet article, nous explorerons l'évolution du JavaScript asynchrone, en commençant par les rappels traditionnels et en progressant vers les promesses et la syntaxe async/await.

1. Fonctions de rappel : Traditionnellement, JavaScript utilisait des fonctions de rappel pour gérer les opérations asynchrones. Les rappels vous permettent de définir une fonction à exécuter une fois une tâche asynchrone terminée. Cependant, à mesure que les bases de code devenaient plus volumineuses et plus complexes, l'approche basée sur le rappel a conduit à des problèmes tels que l'enfer des rappels et une mauvaise lisibilité du code.

exemple :

const datas =[
  {name:"kishan",profession:"software Engineer"},
  {name:"Anuj",profession:"software Engineer"}
]


function getDatas(){
  setTimeout(() => {
     datas.forEach((data,index)=>{
      console.log(data.name);

     })
  }, 1000);
}


function createddata(newdata,callback){
  setTimeout(() => {
      datas.push(newdata)
     callback()
  }, 2000);
}``


createddata({name:"jatin",profession:"software Engineer"},getDatas)

Sortie :
Lorsque vous exécutez le code, le résultat sera :

kishan
Anuj
jatin

étape 2

Les promesses sont meilleures que les rappels pour gérer les opérations asynchrones, car elles offrent une manière plus propre, plus gérable et plus résistante aux erreurs de travailler avec du code asynchrone. Voici pourquoi les promesses sont considérées comme meilleures :

1. Évitez l'enfer des rappels Callback : l'imbrication de plusieurs rappels entraîne un code profondément imbriqué et difficile à lire (communément appelé « l'enfer des rappels »). Promesse : les promesses enchaînent les appels .then(), gardant le code plat et lisible

1. Gestion des erreurs
   Rappel : les erreurs doivent être explicitement traitées à tous les niveaux, ce qui est sujet aux erreurs.
   Promesse : avec .catch(), vous pouvez gérer les erreurs en un seul endroit

2. Meilleure lisibilité
   Les promesses ont une structure claire utilisant .then() et .catch(), ce qui rend le code plus facile à comprendre, à déboguer et à maintenir.

3. Enchaînement de plusieurs appels asynchrones
   Les promesses rendent le chaînage des opérations asynchrones séquentielles transparent

exemple

const datas = [
  { name: "kishan", profession: "software Engineer" },
  { name: "Anuj", profession: "software Engineer" },
];

function getDatas() {
  return new Promise((resolve) => {
    setTimeout(() => {
      datas.forEach((data) => {
        console.log(data.name);
      });
      resolve(); // Signal completion
    }, 1000);
  });
}

function createdData(newData) {
  return new Promise((resolve) => {
    setTimeout(() => {
      datas.push(newData);
      resolve(); // Signal completion
    }, 2000);
  });
}

function logCompletion() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log("All tasks completed!");
      resolve();
    }, 500);
  });
}

// Usage with an Additional Task
createdData({ name: "jatin", profession: "software Engineer" })
  .then(getDatas)
  .then(logCompletion) // New Task
  .catch((err) => console.error(err));

Comment ça marche :
Données créées :
Ajoute une nouvelle entrée de données au tableau de données après 2 secondes.
getDatas :
Enregistre tous les noms dans le tableau de données après 1 seconde.
logCompletion (Nouvelle tâche) :
Journaux « Toutes les tâches terminées ! » après 500 millisecondes.

Sortie :
Lorsque vous exécutez le code mis à jour, le résultat sera :

kishan
Anuj
jatin
All tasks completed!

Pourquoi les promesses rendent cela facile :
Chaque tâche renvoie une promesse, vous permettant d'ajouter, de réorganiser ou de supprimer facilement des étapes dans la chaîne.
La structure épurée garantit que la séquence est maintenue et facile à suivre.

étape 3

L'utilisation de async/await simplifie la syntaxe de Promises, rendant le code plus lisible et plus proche du flux synchrone tout en restant asynchrone. Voici à quoi ressemble votre code une fois réécrit avec async/await :

const datas =[
  {name:"kishan",profession:"software Engineer"},
  {name:"Anuj",profession:"software Engineer"}
]


function getDatas(){
  setTimeout(() => {
     datas.forEach((data,index)=>{
      console.log(data.name);

     })
  }, 1000);
}


function createddata(newdata,callback){
  setTimeout(() => {
      datas.push(newdata)
     callback()
  }, 2000);
}``


createddata({name:"jatin",profession:"software Engineer"},getDatas)

Avantages de l'async/wait :
Lisibilité :
Le code se lit comme une logique synchrone, étape par étape.
Pas de chaînage ni d'imbrication.
Gestion des erreurs :
Utilisez les blocs try...catch pour un mécanisme de gestion des erreurs centralisé et cohérent.
Évolutivité :
L'ajout de nouvelles tâches est aussi simple que l'ajout d'une autre ligne d'attente.

Sortie :
Lorsque vous exécutez le code, vous obtiendrez :

kishan
Anuj
jatin

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!