Les promesses en JavaScript peuvent sembler complexes au premier abord, mais elles sont en réalité plus simples qu’il n’y paraît. Ce tutoriel, basé sur la vidéo « JavaScript Promises In 10 Minutes » de Web Dev Simplified, vous guidera à travers les concepts clés et la syntaxe des promesses.
Concept de Base
Une promesse en JavaScript est similaire à une promesse dans la vie réelle. Vous vous engagez à faire quelque chose, et cette promesse peut avoir deux résultats :
- Résolue (Resolved): La promesse est tenue avec succès.
- Rejetée (Rejected): La promesse n’a pas pu être tenue.
Syntaxe
Pour créer une promesse, on utilise le constructeur Promise
:
let maPromesse = new Promise((resolve, reject) => {
// Code pour accomplir la promesse
if (/* condition de succès */) {
resolve("Message de succès");
} else {
reject("Message d'échec");
}
});
Dans cet exemple :
maPromesse
est la variable contenant l’objet Promise.resolve
etreject
sont des fonctions fournies par le constructeurPromise
.- Le code à l’intérieur de la fonction définit l’action de la promesse.
- Si l’action réussit, on appelle
resolve
avec un message de succès (optionnel). - Si l’action échoue, on appelle
reject
avec un message d’erreur (optionnel).
Interactions avec une Promesse
On utilise les méthodes .then()
et .catch()
pour gérer le résultat d’une promesse :
maPromesse
.then((message) => {
console.log("Succès:", message);
})
.catch((erreur) => {
console.log("Erreur:", erreur);
});
.then()
s’exécute si la promesse est résolue. Le message de succès est passé en argument..catch()
s’exécute si la promesse est rejetée. Le message d’erreur est passé en argument.
Cas d’Utilisation
Les promesses sont utiles pour gérer des opérations asynchrones, comme le téléchargement d’une image depuis un serveur. Au lieu de bloquer le code en attendant la fin du téléchargement, la promesse permet d’exécuter d’autres actions et de gérer le résultat du téléchargement une fois qu’il est disponible.
Remplacer les Callbacks
Les promesses offrent une alternative plus lisible aux callbacks imbriqués. Voici un exemple de conversion d’une fonction utilisant des callbacks en une fonction utilisant une promesse :
function watchTutorialCallback(successCallback, errorCallback) {
// ... Code de la fonction ...
if (/* condition d'erreur */) {
errorCallback("Message d'erreur");
} else {
successCallback("Message de succès");
}
}
function watchTutorialPromise() {
return new Promise((resolve, reject) => {
// ... Code de la fonction ...
if (/* condition d'erreur */) {
reject("Message d'erreur");
} else {
resolve("Message de succès");
}
});
}
L’utilisation de .then()
et .catch()
rend le code plus clair et évite le « callback hell ».
Méthodes Avancées
- Promise.all(): Exécute plusieurs promesses en parallèle et retourne un tableau des résultats une fois que toutes les promesses sont résolues.
- Promise.race(): Exécute plusieurs promesses en parallèle et retourne le résultat de la première promesse résolue ou rejetée.
Conclusion
Les promesses sont un outil puissant pour gérer les opérations asynchrones en JavaScript. Elles permettent d’écrire un code plus lisible et d’éviter les problèmes liés aux callbacks imbriqués. N’hésitez pas à explorer les exemples de la vidéo et à pratiquer pour maîtriser ce concept essentiel.