Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Promesses | JavaScript Asynchrone et APIs
Maîtrise Avancée de JavaScript
course content

Contenu du cours

Maîtrise Avancée de JavaScript

Maîtrise Avancée de JavaScript

2. Manipulation du DOM
3. Événements et Gestion des Événements
4. JavaScript Asynchrone et APIs

book
Promesses

Qu'est-ce qu'une Promesse ?

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

Une promesse commence comme pending et se termine définitivement soit comme fulfilled avec une valeur, soit comme rejected avec une raison.

Comprendre les méthodes resolve, reject, et then()

Créer une Promesse

Pour créer une Promesse, vous passez 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é complétée avec succès ou a échoué.

  • resolve(value): Marque la Promesse comme remplie (réussie) et transmet le résultat (valeur);
  • reject(error): Marque la Promesse comme rejetée (échouée) et transmet l'erreur.

Utiliser then() pour gérer les Promesses résolues :

Une fois qu'une Promesse est créée, vous pouvez gérer le résultat en utilisant la méthode then(). Cette méthode est appelée lorsque la Promesse est remplie (résolue).

Dans cet exemple, la méthode then() reçoit la valeur passée à resolve() et exécute le 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 (échoue), l'erreur est capturée et gérée à l'intérieur de .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 vous permet de gérer les scénarios d'échec.

Chaînage de Promesses pour des Opérations Asynchrones Séquentielles

L'un des principaux avantages des Promesses est la possibilité de les chaîner ensemble, vous permettant de gérer plusieurs opérations asynchrones en séquence sans tomber dans le piège des callbacks. Chaque then() retourne une nouvelle Promesse, vous permettant de chaîner plusieurs appels then() en séquence, avec les résultats affichés dans le HTML à mesure que chaque Promesse est résolue.

html

index.html

js

index.js

css

index.css

copy

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

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

Pourquoi Utiliser les Promesses ?

  1. Éviter le Callback Hell : 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(), facilitant la gestion des opérations rejetées ;
  3. Chaînage Séquentiel : Les promesses vous permettent d'exécuter plusieurs opérations asynchrones en séquence en utilisant le 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() ?

Qu'est-ce qu'une Promesse ?

Qu'est-ce qu'une Promesse ?

Sélectionnez la réponse correcte

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

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

Sélectionnez la réponse correcte

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 4. Chapitre 3
We're sorry to hear that something went wrong. What happened?
some-alt