Promesses JavaScript
“Je promets un résultat !”
“Produire du code” est un code qui peut prendre un certain temps
“Consuming code” est un code qui doit attendre le résultat
Une promesse est un objet JavaScript qui relie la production de code et la consommation de code
Objet de promesse JavaScript
Un objet JavaScript Promise contient à la fois le code producteur et les appels au code consommateur :
Syntaxe de la promesse
let myPromise = new Promise(function(myResolve, myReject) {
// “Produire du code” (peut prendre un certain temps)
maRésolution(); // en cas de succès
monRejet(); // quand erreur
});
// “Consuming Code” (doit attendre une promesse remplie)
maPromise.then(
fonction (valeur) { /* code si réussi */ },
fonction (erreur) { /* code si une erreur */ }
);
Lorsque le code producteur obtient le résultat, il doit appeler l’un des deux rappels :
| Résultat | Appel |
|---|---|
| Succès | myResolve(valeur de résultat) |
| Erreur | myReject (objet d’erreur) |
Propriétés de l’objet Promesse
Un objet JavaScript Promise peut être :
- En attente
- Rempli
- Rejeté
L’objet Promise prend en charge deux propriétés : État et résultat.
Lorsqu’un objet Promise est “en attente” (en cours de fonctionnement), le résultat n’est pas défini.
Lorsqu’un objet Promise est « rempli », le résultat est une valeur.
Lorsqu’un objet Promise est “rejeté”, le résultat est un objet d’erreur.
| myPromise.state | myPromise.result |
|---|---|
| “en attente” | indéfini |
| “réalisé” | une valeur de résultat |
| “rejeté” | un objet d’erreur |
Vous ne pouvez pas accéder aux propriétés Promise État et résultat.
Vous devez utiliser une méthode Promise pour gérer les promesses.
Promesse comment
Voici comment utiliser une Promesse :
maPromise.then(
fonction (valeur) { /* code si réussi */ },
fonction (erreur) { /* code si une erreur */ }
);
Promise.then() prend deux arguments, un rappel en cas de succès et un autre en cas d’échec.
Les deux sont facultatifs, vous pouvez donc ajouter un rappel en cas de réussite ou d’échec uniquement.
Exemple
function monAfficheur(certains) {
document.getElementById(“démo”).innerHTML = certains ;
}
let myPromise = new Promise(function(myResolve, myReject) {
soit x = 0 ;
// Le code producteur (cela peut prendre un certain temps)
si (x == 0) {
maRésolution(“OK”);
} autre {
monRejet(“Erreur”);
}
});
maPromise.then(
fonction (valeur) {monAfficheur (valeur);},
function(error) {myDisplayer(error);}
);
Essayez-le vous-même »
Exemples de promesse JavaScript
Pour démontrer l’utilisation des promesses, nous utiliserons les exemples de rappel du chapitre précédent :
- Attente d’un délai d’attente
- En attente d’un fichier
Attente d’un délai d’attente
Exemple d’utilisation du rappel
setTimeout(fonction() { maFonction(“Je t’aime !!!”); }, 3000);
function maFonction(valeur) {
document.getElementById(“démo”).innerHTML = valeur ;
}
Essayez-le vous-même »
Exemple d’utilisation de la promesse
let myPromise = new Promise(function(myResolve, myReject) {
setTimeout(function() { myResolve(“Je t’aime !!”); }, 3000);
});
maPromise.alors(fonction(valeur) {
document.getElementById(“démo”).innerHTML = valeur ;
});
Essayez-le vous-même »
En attente d’un dossier
Exemple utilisant le rappel
function getFile(monCallback) {
laissez req = new XMLHttpRequest();
req.open(‘GET’, “mavoiture.html”);
req.onload = fonction() {
si (req.status == 200) {
myCallback(req.responseText);
} autre {
myCallback(“Erreur : ” + req.status);
}
}
req.send();
}
getFile(monAfficheur);
Essayez-le vous-même »
Exemple utilisant Promesse
let myPromise = new Promise(function(myResolve, myReject) {
laissez req = new XMLHttpRequest();
req.open(‘GET’, “mavoiture.htm”);
req.onload = fonction() {
si (req.status == 200) {
myResolve(req.response);
} autre {
monRejet(“Fichier introuvable”);
}
} ;
req.send();
});
maPromise.then(
fonction (valeur) {monAfficheur (valeur);},
function(error) {myDisplayer(error);}
);
Essayez-le vous-même »
Prise en charge du navigateur
ECMAScript 2015, également connu sous le nom d’ES6, a introduit l’objet JavaScript Promise.
Le tableau suivant définit la première version du navigateur avec prise en charge complète des objets Promise :
| Chrome 33 | Bord 12 | Firefox 29 | Safari 7.1 | Opéra 20 |
| février 2014 | juillet 2015 | avril 2014 | Septembre 2014 | mars 2014 |
#Promesses #JavaScript
