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) {
// "Producing Code" (May take some time)
myResolve(); // when successful
myReject(); // when error
});
// "Consuming Code" (Must wait for a fulfilled Promise)
myPromise.then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
Lorsque le code producteur obtient le résultat, il doit appeler l'un des deux rappels :
| Résultat | Appeler |
|---|---|
| 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 : state et result .
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 attendant" | indéfini |
| "réalisé" | une valeur de résultat |
| "rejeté" | un objet d'erreur |
Vous ne pouvez pas accéder à l' état et au résultat des propriétés Promise .
Vous devez utiliser une méthode Promise pour gérer les promesses.
Promesse comment
Voici comment utiliser une Promesse :
myPromise.then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
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 myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
let myPromise = new Promise(function(myResolve, myReject) {
let x = 0;
// The producing code (this may take some time)
if (x == 0) {
myResolve("OK");
} else {
myReject("Error");
}
});
myPromise.then(
function(value) {myDisplayer(value);},
function(error) {myDisplayer(error);}
);
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(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}
Exemple d'utilisation de la promesse
let myPromise = new Promise(function(myResolve, myReject) {
setTimeout(function() { myResolve("I love You !!"); }, 3000);
});
myPromise.then(function(value) {
document.getElementById("demo").innerHTML = value;
});
En attente d'un dossier
Exemple utilisant le rappel
function getFile(myCallback) {
let req = new XMLHttpRequest();
req.open('GET', "mycar.html");
req.onload = function() {
if (req.status == 200) {
myCallback(req.responseText);
} else {
myCallback("Error: " + req.status);
}
}
req.send();
}
getFile(myDisplayer);
Exemple utilisant Promesse
let myPromise = new Promise(function(myResolve, myReject) {
let req = new XMLHttpRequest();
req.open('GET', "mycar.htm");
req.onload = function() {
if (req.status == 200) {
myResolve(req.response);
} else {
myReject("File not Found");
}
};
req.send();
});
myPromise.then(
function(value) {myDisplayer(value);},
function(error) {myDisplayer(error);}
);
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 | Edge 12 | Firefox 29 | Safari 7.1 | Opera 20 |
| Feb, 2014 | Jul, 2015 | Apr, 2014 | Sep, 2014 | Mar, 2014 |