Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Gestion des Opérations Asynchrones avec les Promesses | JavaScript Asynchrone et Intégration d’API
Maîtrise Avancée de JavaScript

bookGestion des Opérations Asynchrones avec les Promesses

Qu'est-ce qu'une Promise ?

Une Promise est un espace réservé pour une valeur future, qui peut être :

Une promise commence avec l'état pending et se termine définitivement soit en étant fulfilled avec une valeur, soit en étant rejected avec une raison.

Compréhension des méthodes resolve, reject et then()

Création d'une Promise

Pour créer une Promise, il faut passer une fonction avec deux paramètres : resolve et reject. Ces paramètres sont des fonctions utilisées pour indiquer si l'opération asynchrone a été réalisée avec succès ou a échoué.

const myPromise = new Promise((resolve, reject) => {
  const success = true; // Simulate whether the task is successful

  if (success) {
    resolve('Task completed successfully!');
  } else {
    reject('Task failed.');
  }
});
  • resolve(value) : Marque la Promise comme accomplie (réussie) et transmet le résultat (value) ;
  • reject(error) : Marque la Promise comme rejetée (échouée) et transmet l'erreur.

Utilisation de then() pour gérer les Promises résolues :

Une fois la Promise créée, il est possible de traiter le résultat à l'aide de la méthode then(). Cette méthode est appelée lorsque la Promise est accomplie (résolue).

myPromise.then(result => {
  console.log(result); // Output: Task completed successfully!
});

Dans cet exemple, la méthode then() reçoit la valeur transmise à resolve() et exécute la fonction de rappel avec le résultat. Elle s'exécute uniquement si la Promesse est résolue avec succès.

Gestion des erreurs avec .catch()

Les Promesses offrent un moyen simple de gérer les erreurs via la méthode .catch(). Si une Promesse est rejetée (échec), l'erreur est interceptée et traitée dans .catch().

1234567891011121314151617
const myPromise = new Promise((resolve, reject) => { const success = false; // Simulate a failure if (success) { resolve('Task completed successfully!'); } else { reject('Task failed.'); } }); myPromise .then(result => { console.log(result); }) .catch(error => { console.error('Error:', error); // Output: Error: Task failed. });
copy

La méthode catch() est utilisée pour gérer les erreurs lorsque la Promesse est rejetée. Elle intercepte l’erreur transmise par reject() et permet de gérer les scénarios d’échec.

Chaînage des Promesses pour des opérations asynchrones séquentielles

L’un des principaux avantages des Promesses est la possibilité de les chaîner, ce qui permet de gérer plusieurs opérations asynchrones de manière séquentielle sans tomber dans le callback hell. Chaque appel à then() retourne une nouvelle Promesse, ce qui permet d’enchaîner plusieurs appels then() successifs, avec les résultats affichés dans le HTML à mesure que chaque Promesse est résolue.

index.html

index.html

index.js

index.js

index.css

index.css

copy

Opérations séquentielles : Chaque then() retourne une nouvelle Promesse, transmettant le résultat d'une opération à la suivante. Cela permet une séquence linéaire et claire d'opérations asynchrones qui met à jour le texte affiché dans le HTML.

Gestion des erreurs : La méthode .catch() gère toute erreur survenant lors de la résolution de n'importe quelle Promesse. Cela garantit que les erreurs sont capturées et affichées sur la page, quel que soit l'endroit où elles se produisent dans la chaîne.

Pourquoi utiliser les Promesses ?

  1. Éviter l'enfer des callbacks : Les Promesses offrent une manière plus propre et plus lisible de gérer les opérations asynchrones que les callbacks profondément imbriqués ;
  2. Gestion des erreurs : Les Promesses fournissent une gestion des erreurs intégrée avec .catch(), ce qui facilite la gestion des opérations rejetées ;
  3. Chaînage séquentiel : Les Promesses permettent d'exécuter plusieurs opérations asynchrones en séquence grâce au chaînage, rendant le code plus facile à suivre et à maintenir.

1. Qu'est-ce qu'une Promesse ?

2. Dans le code suivant, que fera .catch() s'il y a une erreur dans l'un des callbacks .then() ?

question mark

Qu'est-ce qu'une Promesse ?

Select the correct answer

question mark

Dans le code suivant, que fera .catch() s'il y a une erreur dans l'un des callbacks .then() ?

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 4. Chapitre 3

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Awesome!

Completion rate improved to 2.22

bookGestion des Opérations Asynchrones avec les Promesses

Glissez pour afficher le menu

Qu'est-ce qu'une Promise ?

Une Promise est un espace réservé pour une valeur future, qui peut être :

Une promise commence avec l'état pending et se termine définitivement soit en étant fulfilled avec une valeur, soit en étant rejected avec une raison.

Compréhension des méthodes resolve, reject et then()

Création d'une Promise

Pour créer une Promise, il faut passer une fonction avec deux paramètres : resolve et reject. Ces paramètres sont des fonctions utilisées pour indiquer si l'opération asynchrone a été réalisée avec succès ou a échoué.

const myPromise = new Promise((resolve, reject) => {
  const success = true; // Simulate whether the task is successful

  if (success) {
    resolve('Task completed successfully!');
  } else {
    reject('Task failed.');
  }
});
  • resolve(value) : Marque la Promise comme accomplie (réussie) et transmet le résultat (value) ;
  • reject(error) : Marque la Promise comme rejetée (échouée) et transmet l'erreur.

Utilisation de then() pour gérer les Promises résolues :

Une fois la Promise créée, il est possible de traiter le résultat à l'aide de la méthode then(). Cette méthode est appelée lorsque la Promise est accomplie (résolue).

myPromise.then(result => {
  console.log(result); // Output: Task completed successfully!
});

Dans cet exemple, la méthode then() reçoit la valeur transmise à resolve() et exécute la fonction de rappel avec le résultat. Elle s'exécute uniquement si la Promesse est résolue avec succès.

Gestion des erreurs avec .catch()

Les Promesses offrent un moyen simple de gérer les erreurs via la méthode .catch(). Si une Promesse est rejetée (échec), l'erreur est interceptée et traitée dans .catch().

1234567891011121314151617
const myPromise = new Promise((resolve, reject) => { const success = false; // Simulate a failure if (success) { resolve('Task completed successfully!'); } else { reject('Task failed.'); } }); myPromise .then(result => { console.log(result); }) .catch(error => { console.error('Error:', error); // Output: Error: Task failed. });
copy

La méthode catch() est utilisée pour gérer les erreurs lorsque la Promesse est rejetée. Elle intercepte l’erreur transmise par reject() et permet de gérer les scénarios d’échec.

Chaînage des Promesses pour des opérations asynchrones séquentielles

L’un des principaux avantages des Promesses est la possibilité de les chaîner, ce qui permet de gérer plusieurs opérations asynchrones de manière séquentielle sans tomber dans le callback hell. Chaque appel à then() retourne une nouvelle Promesse, ce qui permet d’enchaîner plusieurs appels then() successifs, avec les résultats affichés dans le HTML à mesure que chaque Promesse est résolue.

index.html

index.html

index.js

index.js

index.css

index.css

copy

Opérations séquentielles : Chaque then() retourne une nouvelle Promesse, transmettant le résultat d'une opération à la suivante. Cela permet une séquence linéaire et claire d'opérations asynchrones qui met à jour le texte affiché dans le HTML.

Gestion des erreurs : La méthode .catch() gère toute erreur survenant lors de la résolution de n'importe quelle Promesse. Cela garantit que les erreurs sont capturées et affichées sur la page, quel que soit l'endroit où elles se produisent dans la chaîne.

Pourquoi utiliser les Promesses ?

  1. Éviter l'enfer des callbacks : Les Promesses offrent une manière plus propre et plus lisible de gérer les opérations asynchrones que les callbacks profondément imbriqués ;
  2. Gestion des erreurs : Les Promesses fournissent une gestion des erreurs intégrée avec .catch(), ce qui facilite la gestion des opérations rejetées ;
  3. Chaînage séquentiel : Les Promesses permettent d'exécuter plusieurs opérations asynchrones en séquence grâce au chaînage, rendant le code plus facile à suivre et à maintenir.

1. Qu'est-ce qu'une Promesse ?

2. Dans le code suivant, que fera .catch() s'il y a une erreur dans l'un des callbacks .then() ?

question mark

Qu'est-ce qu'une Promesse ?

Select the correct answer

question mark

Dans le code suivant, que fera .catch() s'il y a une erreur dans l'un des callbacks .then() ?

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 4. Chapitre 3
some-alt