JavaScript moderne a introduit de nouvelles façons de gérer les requêtes asynchrones, rendant le
code plus lisible et plus facile à maintenir. Les promesses et la fonctionnalité async/await sont deux
de ces améliorations qui vous permettent de gérer plus efficacement les requêtes AJAX. Dans cette
rubrique, nous allons explorer comment travailler avec Promises et async/await pour effectuer des
requêtes asynchrones avec XMLHttpRequest, rendant le code plus concis et plus facile à comprendre.
Les promesses sont une fonctionnalité JavaScript qui nous permet de gérer les opérations
asynchrones de manière plus élégante et ordonnée. Avec Promises, nous pouvons éviter ce que l'on
appelle "l'enfer des rappels", un scénario courant lorsqu'il s'agit de plusieurs requêtes asynchrones
enchaînées. Au lieu de cela, nous pouvons enchaîner les opérations asynchrones de manière linéaire
et plus lisible.
1.1 Qu'est-ce qu'une Promesse ?
Une promesse est un objet qui représente une valeur qui peut être disponible dans le futur, ou qui
peut être rejetée avec une erreur. C'est une promesse qu'une opération asynchrone se terminera et
fournira un résultat.
Une promesse peut être dans l'un des trois états suivants :
En attente : l'opération asynchrone n'est pas encore terminée, la promesse est en attente.
Réalisé : l'opération asynchrone s'est terminée avec succès et la valeur promise est disponible.
Rejeté : l'opération asynchrone s'est terminée par erreur et la raison de l'erreur est disponible.
1.2 Créer une promesse
Pour créer une promesse, nous utilisons le constructeur Promise, qui prend une fonction comme
argument. Cette fonction, à son tour, a deux paramètres : résoudre et rejeter. resolve est une
fonction qui doit être appelée lorsque l'opération asynchrone se termine avec succès, et rejet est une
fonction qui doit être appelée lorsque l'opération est rejetée avec une erreur.
function maPromise() {
return new Promise(function(résoudre, rejeter) {
// Simule une opération asynchrone qui sera résolue après 2 secondes
setTimeout(function() {
resolve('Opération terminée avec succès !');
}, 2000);
});
}
Pour créer une promesse, nous utilisons le constructeur Promise, qui prend une fonction comme
argument. Cette fonction, à son tour, a deux paramètres : résoudre et rejeter. resolve est une
fonction qui doit être appelée lorsque l'opération asynchrone se termine avec succès, et rejet est une
fonction qui doit être appelée lorsque l'opération est rejetée avec une erreur.
function maPromise() {
return new Promise(function(résoudre, rejeter) {
// Simule une opération asynchrone qui sera résolue après 2 secondes
setTimeout(function() {
resolve('Opération terminée avec succès !');
}, 2000);
});
Dans l'exemple ci-dessus, nous créons une promesse qui simule une opération asynchrone à l'aide de
setTimeout. L'opération sera résolue après 2 secondes et la valeur 'Opération terminée avec succès !'
sera disponible.
1.3 Enchaîner les promesses avec then()
La méthode then() est utilisée pour enchaîner les promesses, vous permettant d'effectuer des actions
lorsque la promesse est résolue avec succès. La méthode then() prend une fonction comme
argument, qui sera appelée lorsque la Promise sera résolue.
maPromise()
.then(function(résultat) {
[Link](résultat); // 'Opération terminée avec succès !'
});
Dans l'exemple ci-dessus, nous enchaînons la Promise myPromise() avec then(), et la fonction passée
à then() sera appelée avec la valeur 'Opération terminée avec succès !' lorsque la promesse est
résolue.
1.4 Gestion des erreurs avec catch()
La méthode catch() est utilisée pour gérer les erreurs qui se produisent lors de l'exécution de
Promise. Si la promesse est rejetée avec une erreur, la fonction passée à catch() sera appelée avec la
raison de l'erreur.
function maPromiseAvecErreur() {
return new Promise(function(résoudre, rejeter) {
// Simule une opération asynchrone qui sera rejetée au bout de 2 secondes
setTimeout(function() {
rejeter('Erreur d\'opération !');
}, 2000);
});
maPromiseAvecErreur()
.then(function(résultat) {
[Link](résultat);
})
.catch(function(erreur) {
[Link](erreur); // 'Erreur d'opération !'
});
Dans l'exemple ci-dessus, nous créons une nouvelle Promise myPromiseWithError() qui simule une
opération qui sera rejetée après 2 secondes. Nous utilisons catch() pour gérer l'erreur et afficher le
message 'Erreur d'opération !'.
L’auteur de tout ce texte est Prototype page 103-104-105 COURS COMPLET MAÎTRISER
JAVASCRIPT. (n.d.). (n.p.): Gavea By Marcel Souza
L'introduction d'async/await représente un changement de paradigme qui redéfinit la
programmation asynchrone en permettant aux développeurs d'écrire du code ressemblant à
une exécution synchrone sans bloquer les threads. Sous le capot, le mécanisme async/await
est un sucre syntaxique au-dessus des promesses, abstraisant efficacement les complexités de
l'enchaînement des promesses et de la gestion des erreurs. Le mot-clé async déclaré sur une
fonction garantit que cette fonction retourne toujours une promesse, tandis que await suspend
temporairement l'exécution de la fonction jusqu'à ce que la promesse attendue soit résolue ou
rejetée. Cette élévation de la logique asynchrone vers un style apparemment synchrone
améliore non seulement la clarté, mais s'aligne également sur le modèle cognitif du
programmeur en termes de séquences entrée-sortie.
Par exemple, considérez l'implémentation traditionnelle basée sur les promesses d'une série
d'opérations asynchrones :
javascript
fetchData(url)
.then(response => processResponse(response))
.then(processedData => saveData(processedData))
.catch(error => [Link]("Error occurred:", error));
Bien que ce code soit nettement plus propre que les implémentations équivalentes avec des
callbacks, l'enchaînement de multiples opérations asynchrones peut encore devenir difficile à
manier lorsque la logique de propagation des erreurs est entremêlée avec la logique métier.
Async/await résout ce problème en permettant l'utilisation de blocs try/catch qui peuvent
encore devenir difficile à manier lorsque la logique de propagation des erreurs est entremêlée
avec la logique métier. Async/await résout ce problème en permettant l'utilisation de blocs
try/catch qui localisent la gestion des erreurs :
javascript
async function handleData(url) {
try {
const response = await fetchData(url);
const processedData = await processResponse(response);
await saveData(processedData);
} catch (error) {
[Link]("Error occurred:", error);
}
}
L'évolution des promesses vers async/await met également en lumière des optimisations
importantes au niveau du langage. Les moteurs JavaScript ont été affinés pour mieux
optimiser le code asynchrone en analysant les points de suspension créés par await. Cela
permet une planification améliorée et une réduction de la surcharge par rapport aux chaînes de
promesses profondément imbriquées. Les mécanismes d'optimisation incluent l'élimination
des appels terminaux pour les chaînes de promesses et le traitement réactif par lots des
microtâches. Une compréhension approfondie de ces optimisations est cruciale pour tirer parti
d'async/await afin d'atteindre des modèles de concurrence quasi-optimaux et une utilisation
efficace des ressources
Mastering Asynchronous JavaScript: Unlock the Secrets of Expert-Level Skills. (2025). (n.p.): Walzone
Press.