Les promesses JavaScript expliquées sans détour
Async, await, then, catch : démêler l'asynchrone en JavaScript une bonne fois pour toutes avec des exemples que vous pouvez exécuter maintenant.
L'asynchrone est l'un des concepts qui bloquent le plus longtemps les développeurs JavaScript en apprentissage. Les callbacks fonctionnent, mais deviennent illisibles dès qu'on les imbrique. Les promesses sont venues résoudre ce problème, puis `async/await` a rendu leur syntaxe encore plus naturelle.
Une promesse représente une valeur qui n'est pas encore disponible mais qui le sera dans le futur. Elle est dans l'un de trois états : pending (en attente), fulfilled (résolue avec succès) ou rejected (rejetée avec une erreur). Une fois passée dans l'un des deux états terminaux, elle ne peut plus changer.
La syntaxe de base
La méthode `.then()` reçoit la valeur résolue et retourne elle-même une promesse, ce qui permet de chaîner les opérations. `.catch()` intercepte toute erreur survenue dans la chaîne, peu importe à quelle étape elle s'est produite. `.finally()` s'exécute dans tous les cas, succès ou échec, et est utile pour masquer un indicateur de chargement.
L'API `fetch` est le meilleur terrain d'entraînement : `fetch('https://api.exemple.com/data').then(res => res.json()).then(data => console.log(data)).catch(err => console.error(err))`. Chaque `.then()` reçoit le résultat du précédent et peut le transformer.
Async/await : le sucre syntaxique
Le mot-clé `async` devant une fonction la transforme en fonction qui retourne toujours une promesse. À l'intérieur, `await` suspend l'exécution jusqu'à ce que la promesse sur laquelle il est posé soit résolue. Le code redevient lisible de haut en bas, comme du code synchrone.
L'équivalent `async/await` du code `fetch` ci-dessus ressemble à ceci : déclarez une fonction `async`, utilisez `await fetch(url)`, puis `await res.json()`, et enveloppez le tout dans un bloc `try/catch` pour gérer les erreurs. La logique reste identique, mais la lisibilité s'améliore considérablement.
Un piège classique : oublier `await` devant un appel asynchrone. Vous récupérez alors la promesse elle-même, pas sa valeur résolue, et les bugs qui en découlent peuvent être déroutants. Habituez-vous à vérifier que chaque appel de fonction asynchrone est bien précédé d'`await` dans un contexte `async`.