Constructeur Promise()

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨juillet 2015⁩.

Le constructeurPromise() est principalement utilisé afin d'envelopper des fonctions qui ne prennent pas en charge les promesses.

Exemple interactif

const promise1 = new Promise((resolve, reject) => {  setTimeout(() => {    resolve("foo");  }, 300);});promise1.then((value) => {  console.log(value);  // Expected output: "foo"});console.log(promise1);// Expected output: [object Promise]

Unefonction à exécuter par le constructeur lors de la construction du nouvel objetPromise.executeur contient du code spécifique qui relie le résultat d'une opération à une promesse. C'est le programme qui doit fournir ce code. Sa signature doit être :

function(fonctionResolution, fonctionRejet){  // généralement une opération asynchrone}

fonctionResolution etfonctionRejet sont également des fonctions, qu'on peut nommer librement. Ces deux fonctions prennent un seul paramètre, qui peut être de n'importe quel type.

fonctionResolution(valeur) // appelée lors de la résolutionfonctionRejet(raison)      // appelée lors du rejet

Le paramètrevaleur defonctionResolution peut être une autre promesse, auquel cas la promesse est insérée dynamiquement dansla chaîne de promesses.

Quant àexecuteur, il est important de comprendre :

Que la valeur de retour deexecuteur est ignorée.
Que si une erreur est déclenchée pendant l'exécution deexecuteur, la promesse est rejetée.

Ainsi, voici le mécanisme par lequelexecuteur produit un effet :

Au moment où le constructeur génère le nouvel objetPromise, il génère également une paire de fonctions correspondantesfonctionResolution etfonctionRejet qui sont « reliées » à l'objetPromise.
Le code contenu dansexecuteur peut réaliser une opération et refléter le résultat de l'opération (si la valeur n'est pas un autre objetPromise) en object) comme étant « résolue » ou « rejetée » en appelant respectivementfonctionResolution oufonctionRejet.
Autrement dit, le code contenu dansexecuteur communique par l'effet de bord fourni avecfonctionResolution oufonctionRejet. De cette façon, la promesse devient « résolue » ou « rejetée ».

Pour résumer, voici les étapes généralement suivies :

L'opération portée parexecuteur est asynchrone et fournit une fonction de rappel (callback).
La fonction de rappel est définie au sein du code deexecuteur.
La fonction de rappel se termine en invoquantfonctionResolution.
L'invocation defonctionResolution se fait avec un paramètrevaleur.
valeur est passée en retour à l'objetPromise.
L'objetPromise appelle, de façon asynchrone, toute fonction passée via.then(gestionSucces).
La valeur reçue par.then(gestionSucces) est passée comme paramètre d'entrée àgestionSucces qui est appelée (voirl'enchaînement des promesses).

Valeur de retour

Lorsqu'il est appelé avec l'opérateurnew, le constructeurPromise() renvoie un objetPromise. Cette promesse sera résolue lorsque l'une des fonctionsfonctionResolution oufonctionRejet sera appelée. Si on passe une promesse comme argument àfonctionResolution oufonctionRejet, on pourra dire que la promesse courante est résolue, mais pas que la chaîne de promesses est terminée.

Exemples

Créer une nouvelle promesse

On crée un objetPromise en utilisant le constructeur avec l'opérateurnew. Ce constructeur prend une fonction en argument, et cette fonction prend à son tour deux fonctions en paramètres. La première de ces deux fonctions est appelée lorsque la tâche asynchrone se termine correctement, c'est alors le résultat de l'opération qui est passé comme paramètre. La seconde fonction est appelée lorsque la tâche échoue et c'est alors la raison de l'échec (généralement un objet d'erreur) qui est passée en argument.

const maPremierePromesse = new Promise((resolution, rejet) => {  // réaliser une opération asynchrone qui appellera :  //  //   resolution(uneValeur)    // réussite  // ou  //   rejet("raison d'échec")  // échec});

Renvoyer une promesse depuis une fonction

Pour qu'une fonction ait les fonctionnalités d'une promesse, on lui fera renvoyer une promesse :

function maFonctionAsync(url) {  return new Promise((resolution, rejet) => {    const xhr = new XMLHttpRequest();    xhr.open("GET", url);    xhr.onload = () => resolution(xhr.responseText);    xhr.onerror = () => rejet(xhr.statusText);    xhr.send();  });}