Promise.prototype.then()

La méthode then() renvoie un objet Promise. Elle prend deux arguments qui sont deux fonctions callback à utiliser en cas de complétion ou d'échec de la Promise.

Syntaxe

p.then(siTenue, siRejetée);

p.then(function(valeur) {
   // Promesse tenue
  }, function(raison) {
  // Rejet de la promesse
});

Paramètres

siTenue

Une fonction appelée lorsque la Promise est tenue. Cette fonction a un seul argument, la valeur qui a permis de résoudre la promesse.

siRejetée

Une fonction appelée lorsque la Promise est rejetée. Cette fonction a un seul argument, la raison pour laquelle la promesse a été rejetée.

Valeur de retour

Une promesse (Promise).

Description

Comme les méthodes then et Promise.prototype.catch() renvoient des promesses, elles peuvent s'enchaîner grâce à la composition de promesses.

Exemples

Utilisation de la méthode then

var p1 = new Promise(function(resolve, reject) {
  resolve("Succès !");
  // ou
  // reject("Erreur !");
});

p1.then(function(valeur) {
  console.log(valeur); // Succès !
}, function(raison) {
  console.log(raison); // Erreur !
});

Composition - Chaînage

La méthode then renvoie une Promise, on peut donc facilement enchaîner plusieurs appels à la méthode then. Les valeurs renvoyées par les méthodes de succès (siTenue) ou d'échec (siRompue) seront automatiquement converties en promesses résolues (sur lesquelles on pourra utiliser then).

var p2 = new Promise(function(resolve, reject) {
  resolve(1);
});

p2.then(function(valeur) {
  console.log(valeur); // 1
  return valeur + 1;
}).then(function(valeur) {
  console.log(valeur); // 2
});

p2.then(function(valeur) {
  console.log(valeur); // 1
});

Vous pouvez également utiliser le chaînage pour implémenter une fonction basée sur les promesses, elle-même basée sur une API fonctionnant avec les promesses

function fetch_current_data() {
  // L'API fetch() renvoie un objet Promise. Cette fonction
  // expose une API similaire mais une couche logique est 
  // ajoutée pour déterminer la valeur utilisée pour 
  // l'accomplissement de la promesse
  return fetch("current-data.json").then((response) => {
    if (response.headers.get("content-type") != "application/json") {
      throw new TypeError();
    }
    var j = response.json();
    // éventuellement, on peut manipuler j
    return j; // la valeur d'accomplissement (fulfillment)
              // fournie à l'utilisateur avec
              // fetch_current_data().then()
  });
}

Si onFulfilled renvoie une promesse, la valeur de retour de then sera résolue / rompue par cette promesse.

function resolveLater(resolve, reject) {
  setTimeout(function () {
    resolve(10);
  }, 1000);
}
function rejectLater(resolve, reject) {
  setTimeout(function () {
    reject(20);
  }, 1000);
}

var p1 = Promise.resolve("foo");
var p2 = p1.then(function() {
  // On renvoie une promesse qui sera résolue avec la valeur
  // 10 après 1 seconde
  return new Promise(resolveLater);
});
p2.then(function(v) {
  console.log("resolved", v);  // "resolved", 10
}, function(e) {
  // not called
  console.log("rejected", e);
});

var p3 = p1.then(function() {
  // On renvoie une promesse qui sera rompue avec la valeur
  // 20 après 1 seconde
  return new Promise(rejectLater);
});
p3.then(function(v) {
  // ce n'est pas appelé
  console.log("resolved", v);
}, function(e) {
  console.log("rejected", e); // "rejected", 20
});

Spécifications

Compatibilité des navigateurs

Pour contribuer à ces données de compatibilité, vous pouvez envoyer une poule requête sur : https://github.com/mdn/browser-compat-data/blob/master/javascript/promise.json.

Voir aussi

• Promise
• Promise.prototype.catch()