Les Promises JavaScript

Les Promises en JavaScript constituent un outil puissant pour gérer les opérations asynchrones, permettant aux développeurs d'écrire un code plus propre et plus robuste. Ce chapitre explique ce qu'est une promise, les trois états dans lesquels elle peut se trouver, comment la fonction exécutrice fonctionne avec resolve et reject, comment consommer les résultats avec .then, .catch et .finally, ainsi que quand les callbacks de promise s'exécutent réellement (la file des microtâches). Comprendre ces fondamentaux est essentiel avant de passer au chaînage, à l'API Promise et à async/await.

Introduction aux Promises JavaScript

Une Promise est un object qui représente une valeur qui n'est peut-être pas encore disponible, mais qui le sera à un moment donné. Au lieu de passer un callback à une fonction asynchrone en espérant qu'il sera appelé, vous recevez immédiatement un object promise et y attachez des callbacks. Cela évite les callbacks profondément imbriqués, souvent appelés « callback hell », et vous offre une façon unique et cohérente de gérer à la fois le succès et l'échec.

Une tâche asynchrone typique — une requête réseau, un minuteur, la lecture d'un fichier — ne dispose pas immédiatement de son résultat. La promise est un espace réservé pour ce résultat.

Les trois états d'une Promise

Une promise se trouve toujours dans exactement l'un des trois états suivants :

• pending — l'état initial ; l'opération n'est pas encore terminée.
• fulfilled — l'opération s'est terminée avec succès et la promise possède une valeur.
• rejected — l'opération a échoué et la promise possède une raison (généralement une Error).

Une promise en attente peut passer à l'état fulfilled ou rejected. Une fois cela fait, elle est settled (résolue définitivement) et ne peut plus jamais changer d'état. Cette transition à sens unique et à usage unique est ce qui rend les promises prévisibles : un callback .then attaché à une promise déjà fulfilled s'exécutera quand même, et une promise ne peut jamais repasser de fulfilled à rejected.

                  ┌─────────────┐  resolve(value)   ┌─────────────┐
                  │   pending   │ ────────────────▶ │  fulfilled  │
   new Promise ─▶ │             │                   └─────────────┘
                  │             │  reject(reason)   ┌─────────────┐
                  └─────────────┘ ────────────────▶ │  rejected   │
                                                    └─────────────┘

Créer une Promise

Pour créer une promise, vous appelez le constructeur Promise et lui passez une fonction appelée l'exécuteur. L'exécuteur s'exécute immédiatement et de manière synchrone au moment où la promise est créée. Il reçoit deux fonctions en arguments, conventionnellement nommées resolve et reject :

• Appelez resolve(value) pour tenir la promise avec value.
• Appelez reject(reason) pour rejeter la promise avec reason.

Tant que vous n'appelez pas l'une d'elles, la promise reste en attente.

L'exécuteur reçoit resolve et reject afin de pouvoir régler la promise une fois le travail asynchrone terminé. Ici, la promise devient fulfilled après un minuteur d'une seconde :

Remarque : Seul le premier appel à resolve ou reject est pris en compte. Une fois la promise réglée, tout appel ultérieur à resolve ou reject est ignoré. De plus, si l'exécuteur lève une erreur de manière synchrone, la promise est automatiquement rejetée avec cette erreur.

Gérer les résultats avec .then, .catch et .finally

Une fois la promise créée, vous consommez son résultat avec les méthodes .then, .catch et .finally. C'est ainsi que le reste de votre code réagit à une promise réglée.

La méthode then

La méthode .then est utilisée pour planifier un callback à exécuter lorsque la promise est fulfilled. Pour qu'une promise soit fulfilled, la méthode resolve doit être appelée. L'argument que vous passez à la méthode resolve sera la valeur finale de la promise.

Dans ce code, la promise ne sera fulfilled qu'après l'expiration du délai de 1000 ms, lorsque la méthode resolve est appelée avec « Done! ».

La fonction dans la partie then n'est exécutée qu'après l'appel de la méthode resolve.

.then peut également accepter un second argument — un gestionnaire de rejet — mais l'utilisation d'un .catch séparé (ci-dessous) est plus claire et capture également les erreurs des gestionnaires précédents.

La méthode .catch

La méthode .catch est utilisée pour gérer la promise si elle est rejetée. Cela signifie qu'une erreur est levée dans le bloc de la fonction promise ou que la méthode reject est appelée.

Pour des modèles de gestion d'erreurs plus riches — rejet versus erreurs levées, re-levée d'erreurs et récupération dans une chaîne — voir Gestion des erreurs avec les Promises.

La méthode .finally

La méthode .finally vous permet d'exécuter du code une fois la promise réglée, quelle que soit son issue. Elle ne reçoit aucun argument (elle ne sait pas si la promise a été fulfilled ou rejected) et passe le résultat ou l'erreur sans modification, ce qui la rend idéale pour le nettoyage, comme masquer un indicateur de chargement.

Quand les callbacks de Promise s'exécutent-ils ? (Microtâches)

Une surprise fréquente est que les callbacks de .then, .catch et .finally ne s'exécutent jamais de manière synchrone, même si la promise est déjà réglée. Ils sont planifiés dans la file des microtâches, que le moteur traite uniquement après la fin du code synchrone en cours.

Cela signifie que le code synchrone s'exécute toujours en premier, et que les callbacks de promise s'exécutent avant les minuteurs (setTimeout), qui se trouvent dans la file des macrotâches distincte.

Même si la promise est résolue immédiatement et que le délai est de 0, le callback de la promise (3) s'exécute avant le callback du minuteur (4), car la file des microtâches est entièrement vidée avant l'exécution de la prochaine macrotâche.

Récupérer des données depuis une API avec des Promises

Cet exemple montre comment récupérer des données depuis une API distante à l'aide de promises.

Chaîner les Promises

Le chaînage de promises est une fonctionnalité puissante qui permet de relier plusieurs opérations asynchrones. Chaque .then retourne une nouvelle promise, et ce que vous retournez depuis un gestionnaire devient la valeur de fulfillment de cette nouvelle promise — c'est pourquoi l'exemple ci-dessous transmet une valeur à travers plusieurs étapes. Pour plus d'informations, consultez JavaScript : Promises et Chaînage.

Intégrer async/await avec les Promises JavaScript

L'utilisation d'async/await peut simplifier la gestion des opérations asynchrones, rendant votre code plus propre et plus facile à comprendre tout en conservant toute la puissance des promises JavaScript. Vous en apprendrez davantage dans JavaScript async/await, mais voici un exemple simple.

Conclusion

Maîtriser les promises JavaScript est essentiel pour tout développeur souhaitant gérer efficacement les opérations asynchrones. Retenez le modèle fondamental : une promise est pending jusqu'à ce que l'exécuteur appelle resolve ou reject, après quoi elle est settled pour toujours ; vous lisez le résultat avec .then/.catch/.finally ; et ces callbacks s'exécutent toujours en tant que microtâches, après le code synchrone en cours.

Pour aller plus loin

• JavaScript : Promises et Chaînage — enchaînez des étapes asynchrones et transmettez des valeurs.
• L'API Promise — assistants statiques tels que Promise.all, Promise.race, Promise.allSettled et Promise.resolve.
• Gestion des erreurs avec les Promises — rejets, erreurs levées et modèles de récupération.
• JavaScript async/await — écrivez du code basé sur des promises qui se lit comme du code synchrone.

Pratique