Introduction aux promesses en JavaScript

Vous savez déjà que l'utilisation du modèle de rappels (callbacks) pour l'asynchronisme mène facilement à une situation appelée callback hell. C'est pourquoi un nouveau modèle appelé promesses (promise) a été introduit en JavaScript. Étudions ce modèle.

Une promesse représente un objet, dans lequel une fonction est passée en paramètre, et à l'intérieur de laquelle nous devons placer notre code asynchrone :

javascriptlet promise = new Promise(function() {
  // code asynchrone
});

Comme vous le voyez, j'ai enregistré l'objet de promesse dans la variable promise. À un autre endroit du code, je peux appliquer à cette variable la méthode then, en lui passant une fonction contenant le code qui doit être exécuté une fois le code asynchrone, écrit lors de la création de cette promesse, terminé :

javascriptpromise.then(function() {
  // s'exécutera à la fin du code asynchrone
});

Cela semble déroutant, alors regardons un exemple. Supposons que j'aie le code asynchrone suivant :

javascriptsetTimeout(function() {
  let result = [1, 2, 3, 4, 5];
}, 3000);

Supposons que je veuille résoudre pour lui notre tâche principale de l'asynchronisme : exécuter un certain code après le déclenchement du minuteur. En même temps, je ne veux pas placer ce code dans le minuteur lui-même et je veux que le résultat, écrit par moi dans la variable result, parvienne d'une manière ou d'une autre à ce code. En somme, nous avons résolu cette tâche dans les leçons précédentes via des rappels et des abonnements. Regardons maintenant comment le faire via les promesses.

Pour commencer, nous devons envelopper notre code asynchrone dans une promesse :

javascriptlet promise = new Promise(function() {
  setTimeout(function() {
    let result = [1, 2, 3, 4, 5];
  }, 3000);
});

Cependant, cela ne suffit pas. Nous devons indiquer explicitement que notre code asynchrone est terminé. Une fonction de résolution spéciale nous y aidera, passée automatiquement dans le premier paramètre de la fonction, si celui-ci est spécifié :

javascriptlet promise = new Promise(function(resolve) { // nous indiquons le paramètre
  setTimeout(function() {
    let result = [1, 2, 3, 4, 5];
  }, 3000);
});

À l'aide de la fonction de résolution, nous pouvons explicitement indiquer à la promesse que le code asynchrone est terminé. Pour cela, nous devons appeler cette fonction à l'endroit où nous en avons besoin :

javascriptlet promise = new Promise(function(resolve) {
  setTimeout(function() {
    let result = [1, 2, 3, 4, 5];
    resolve(); // nous terminons la promesse
  }, 3000);
});

En même temps, si nous voulons transmettre à l'extérieur un certain résultat du code asynchrone, nous pouvons le passer en paramètre à notre fonction de résolution :

javascriptlet promise = new Promise(function(resolve) {
  setTimeout(function() {
    let result = [1, 2, 3, 4, 5];
    resolve(result); // nous transmettons le résultat
  }, 3000);
});

Nous pouvons, bien sûr, nous débarrasser de la variable intermédiaire :

javascriptlet promise = new Promise(function(resolve) {
  setTimeout(function() {
    resolve([1, 2, 3, 4, 5]);
  }, 3000);
});

Maintenant, n'importe où ailleurs, nous pouvons appeler la méthode then de notre promesse :

javascriptpromise.then(function() {
  // se déclenchera à la fin de la promesse
});

Le résultat de la promesse arrivera dans le premier paramètre de la fonction, si nous souhaitons le spécifier :

javascriptpromise.then(function(result) {
  console.log(result); // affichera le tableau avec le résultat
});