JS : Promesse ou rappel ?

Comprendre les promesses et les rappels en JavaScript

Questions et réponses clés pour les tests de certification

1. Qu'est-ce qu'une fonction de rappel et en quoi diffère-t-elle d'une fonction normale ?

   • Une fonction de rappel est passée en argument à une autre fonction et est invoquée pour gérer les opérations asynchrones. Contrairement aux fonctions classiques, les rappels sont conçus pour être exécutés une fois qu'une certaine tâche est terminée.

2. Comment les promesses améliorent-elles la lisibilité du code et gèrent les opérations asynchrones par rapport aux rappels ?

   • Les promesses permettent un chaînage et une meilleure gestion des erreurs, conduisant à un code plus lisible et maintenable. Ils aident à éviter les structures profondément imbriquées connues sous le nom de « l'enfer des rappels ».

3. Quels sont les principaux états d'une promesse et comment transitent-ils entre ces états ?

   • Les principaux états sont : En attente (état initial), Réalisé (opération terminée avec succès) et Rejeté (échec de l'opération). Une promesse passe de En attente à Réalisée ou Rejetée.

4. Comment pouvez-vous gérer les erreurs à l'aide de Promises, et comment cela se compare-t-il à la gestion des erreurs avec les rappels ?

   • Les promesses fournissent une méthode catch pour gérer les erreurs de manière rationalisée, tandis que la gestion des erreurs avec des rappels nécessite souvent la transmission d'objets d'erreur et plusieurs vérifications dans les rappels imbriqués.

5. Quelle est la différence entre Promise.all et Promise.race, et quand utiliseriez-vous chacun d'eux ?

   • Promise.all se résout lorsque toutes les promesses d'entrée sont résolues, ce qui le rend utile pour attendre la fin de plusieurs opérations asynchrones. Promise.race se résout dès que l'une des promesses d'entrée est résolue, utile pour les scénarios où le résultat de la première opération terminée est nécessaire.

6. Comment la syntaxe async/await simplifie-t-elle le travail avec Promises, et quelles sont les règles d'utilisation de wait ?

   • La syntaxe async/await permet d'écrire du code asynchrone de manière synchrone, améliorant ainsi la lisibilité. wait ne peut être utilisé que dans des fonctions asynchrones et suspend l'exécution jusqu'à ce que la promesse soit résolue.

---

Introduction

Dans le paysage évolutif de JavaScript, la gestion efficace des opérations asynchrones est essentielle pour créer des applications Web performantes. Alors que les rappels constituaient l'approche originale, Promises a introduit une manière plus structurée et plus lisible de gérer les tâches asynchrones. Ce blog explore les subtilités de l'utilisation des promesses par rapport aux rappels, en supposant que vous ayez déjà une compréhension fondamentale de ces concepts.

Avantages des promesses par rapport aux rappels

Lisibilité et maintenabilité améliorées

Les rappels, bien que fonctionnels, conduisent souvent à des structures profondément imbriquées connues sous le nom de « l'enfer des rappels », ce qui rend le code difficile à lire et à maintenir.

Exemple de rappel enfer :

fetchData(function(response1) {
  fetchMoreData(response1, function(response2) {
    fetchEvenMoreData(response2, function(response3) {
      console.log(response3);
    });
  });
});

Amélioré avec des promesses :

fetchData()
  .then(response1 => fetchMoreData(response1))
  .then(response2 => fetchEvenMoreData(response2))
  .then(response3 => console.log(response3))
  .catch(error => console.error(error));

Gestion des erreurs

Avec les rappels, la gestion des erreurs peut devenir fastidieuse car vous devez transmettre les objets d'erreur et les gérer à chaque niveau.

Gestion des erreurs avec les rappels :

function fetchData(callback) {
  setTimeout(() => {
    if (/* error condition */) {
      callback(new Error('An error occurred'), null);
    } else {
      callback(null, 'data');
    }
  }, 1000);
}

fetchData((error, data) => {
  if (error) {
    console.error(error);
  } else {
    console.log(data);
  }
});

Gestion des erreurs avec les promesses :

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (/* error condition */) {
        reject(new Error('An error occurred'));
      } else {
        resolve('data');
      }
    }, 1000);
  });
}

fetchData()
  .then(data => console.log(data))
  .catch(error => console.error(error));

Méthodes de promesse avancées

Promesse.tout

Promise.all est utile lorsque vous devez attendre la fin de plusieurs opérations asynchrones avant de continuer.

Exemple:

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then(values => {
  console.log(values); // [3, 42, "foo"]
});

Promesse.race

Promise.race est bénéfique lorsque vous avez besoin du résultat de l'opération la plus rapide.

Exemple:

const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, 'one');
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'two');
});

Promise.race([promise1, promise2]).then(value => {
  console.log(value); // "two"
});

Simplifier le code asynchrone avec async/await

La syntaxe async/await vous permet d'écrire du code asynchrone qui semble synchrone, améliorant la lisibilité et réduisant la complexité du chaînage des promesses.

Exemple:

async function fetchData() {
  return 'data';
}

async function processData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

processData();

Conclusion

Alors que les rappels ont jeté les bases de la gestion des opérations asynchrones en JavaScript, les promesses ont considérablement amélioré la lisibilité, la maintenabilité et les capacités de gestion des erreurs du code asynchrone. Comprendre comment et quand utiliser efficacement ces outils est crucial pour le développement JavaScript moderne. Avec Promises et la syntaxe async/await, les développeurs peuvent écrire du code plus propre et plus gérable, ouvrant la voie à des applications plus robustes.

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!