Promise JavaScript

"Je promets un résultat !"

"Code de Production" est le code qui nécessite du temps

"Code de Consommation" est le code qui doit attendre un résultat

Promise est un objet JavaScript qui relie le code de génération et le code de consommation

Objets Promise en JavaScript

Les objets Promise en JavaScript contiennent du code de production et des appels de code de consommation :

Syntaxe de Promise

let myPromise = new Promise(function(myResolve, myReject) {
// "Code de Production" (peut nécessiter du temps)
  myResolve(); // En cas de succès
  myReject();  // En cas d'erreur
});
// "Code de Consommation" (doit attendre un engagement réalisé)
myPromise.then(
  function(value) { /* Code à exécuter en cas de succès */ },
  function(error) { /* Code à exécuter en cas d'erreur */ }
);

Lorsque le code s'exécute et obtient un résultat, il doit appeler l'un des deux rappels :

Résultat Appel
Réussite myResolve(valeur de résultat)
Erreur myReject(objet d'erreur)

Propriétés de l'objet Promise

Les objets Promise en JavaScript peuvent être :

  • Pending
  • Fulfilled
  • Rejected

Les objets Promise supportent deux propriétés :state et result.

Quand un objet Promise est "en attente" (en cours), le résultat est undefined.

Quand un objet Promise est "réalisé", le résultat est une valeur.

Quand un objet Promise est "rejeté", le résultat est un objet d'erreur.

myPromise.state myPromise.result
"en attente" undefined
"réalisé" Valeur de résultat
"rejeté" Objet d'erreur

Vous ne pouvez pas accéder aux propriétés Promise state et result.

Vous devez utiliser la méthode Promise pour traiter Promise.

Comment utiliser Promise

Voici les méthodes d'utilisation de Promise :

myPromise.then(
  function(value) { /* code if successful */ },
  function(error) { /* code if some error */ }
);

Promise.then() a deux paramètres, l'un pour le callback de succès et l'autre pour le callback d'échec.

Les deux sont optionnels, donc vous pouvez ajouter des callbacks pour le succès ou l'échec.

Exemple

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
let myPromise = new Promise(function(myResolve, myReject) {
  let x = 0;
// Génération de code (cela peut prendre un certain temps)
  if (x == 0) {
    myResolve("OK");
  } else {
    myReject("Error");
  }
});
myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

Essayez-le vous-même

Exemple de Promise en JavaScript

Pour illustrer l'utilisation de Promise, nous utiliserons l'exemple de callback de la section précédente :

  • Attente de délai d'expiration
  • Attente du fichier

Attente de délai d'expiration

Exemple d'utilisation de callback

setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
  document.getElementById("demo").innerHTML = value;
}

Essayez-le vous-même

Exemple d'utilisation de Promise

let myPromise = new Promise(function(myResolve, myReject) {
  setTimeout(function() { myResolve("I love You !!"); }, 3000);
});
myPromise.then(function(value) {
  document.getElementById("demo").innerHTML = value;
});

Essayez-le vous-même

Attente du fichier

Exemple d'utilisation de callback

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);

Essayez-le vous-même

Exemple d'utilisation de Promise

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("Fichier introuvable");
    }
  };
  req.send();
});
myPromise.then(
  function(value) {myDisplayer(value);},
  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 Promise de JavaScript.

Le tableau suivant indique la première version de navigateur qui prend en charge pleinement l'objet Promise :

Chrome IE Firefox Safari Opera
Chrome 33 Edge 12 Firefox 29 Safari 7.1 Opera 20
Février 2014 Juillet 2015 Avril 2014 Septembre 2014 Mars 2014