javascript promise
JavaScript

Javascript promise : comment maîtriser ce concept avancé rapidement?

Dans cet article nous allons parler en javascript, de la notion de promise. Je vous le dis directement, c’est une notion que je trouve assez compliqué à comprendre. Nous allons parler de ce concept de façon concrète dans un premier temps avant d’aborder les notions techniques.

Javascript promise : cas concret

Imaginions que vous vouliez rentrer chez vous. Vous allez faire une suite d’instruction pour ouvrir votre porte d’entrée, entrée chez vous et fermez la porte, cela donnera quelque chose du style :

  • Je met la clef dans la serrure
  • Je tourne la clef
  • J’ouvre la porte avec la poigné
  • Vous rentrez
  • Je ferme la porte
  • Je ferme la porte à clef

Vous noterez que vous ne pouvez pas faire une action avant que la précédente soit réalisée.

Cela vous paraît extrêmement logique. Pour le javascript, ce n’est absolument pas inée. Il va falloir lui indiquer, tout l’intérêt des promises.

Comment javascript comprend cela?

Le langage Javascript, contrairement à vous, ne va pas cherchez à comprendre une action doit attendre une autre action avant d’être exécuter. Il va tracer tout droit. C’est là où il y a un problème. Reprenons notre exemple précédent mais avec des temps d’exécution :

  • Je met la clef dans la serrure (10 secondes) : vous cherchez la bonne clef
  • Je tourne la clef (2 secondes) le temps de tourner la clef
  • J’ouvre la porte avec la poigné (1 seconde) actionner une poignée

Le langage Javascript ne va pas attendre que vous ayez trouver la bonne clef et va directement exécuter l’action tourner la clef et ensuite ouvrir la porte avec la poignée. Les promises vont servir à dire au langage Javascript, une fois que cette action est finie, exécute cette action, puis cette action, etc…

Les promises dans le code

Une promise en javascript est un objet qui permet de dire si une action à réussi ou fail, et dire quoi faire dans chacun des deux cas :

const clefTrouve = true;

function clefDansSerrure() {
  return new Promise((resolve, reject) => {
    console.log("J'ai trouvé la clef");
    // réussir une fois sur deux
    if (clefTrouve) {
      setTimeout(resolve("clef trouvé"),10000);
    } else {
      reject("clef non trouvé");
    }
  })
}

function tournerLaClef(){
    console.log('Je tourne la clef');
}


const promise = clefDansSerrure();
promise.then(tournerLaClef, clefDansSerrure);

On utilise le mot clef resolve pour résoudre une promise, et exécuté la fonction de callback, ici tournerLaClef. A l’inverse, on utilise le mot clef reject, pour dire que la promise a échoué, on appelle alors la fonction de callback d’echec, ici clefDansSerrure.

Les promises sont des notions assez complexes à appréhender si vous êtes débutant. Je vous conseille de relire plusieurs fois cet article et de poser vos questions en commentaire, je reste à votre disposition pour y répondre et clarifier tout cela.

Si vous voulez aller plus loin dans votre apprentissage en javascript, je ne peux que vous conseiller de lire cet article :
http://pierreterrat.com/javascript-:-le-guide-ultime-pour-bien-commencer-a-apprendre/

Beaucoup d’efforts et de temps sont passés pour vous fournir du contenu de qualité, merci de partager et de commenter cet article pour faire vivre ce blog.

2 commentaires

    • pterrat

      Bonjour, le settimeout n’est pas obligatoire. Il est uniquement dans mon exemple pour permettre de voir l’utilité d’une promise en attendant quelques secondes. Les promises sont très utilisées dans les appels serveur (requete ajax)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *