J’ai été très excité par les Promises depuis leur introduction il y a un an. Bien qu’il y ait beaucoup de postes et d’opinions flottant autour, les Promises ne rendront pas votre code plus performant… ils le rendront plus facile à lire et à comprendre (ce qui, dans mon livre, compte souvent pour beaucoup plus !)
Pour la première partie de ce post, je vais expliquer la structure de base des promesses. Si vous avez couvert cela, n’hésitez pas à faire défiler la dernière moitié du post.
Les promesses expliquées en clair
Voici la structure de base d’une promesse en Javascript:
Pretty typique (et insaisissable) extrait de code là. Je vais essayer de décomposer ce qui se passe.
Pour commencer, concentrez-vous uniquement sur les lignes 1-15:
- Il y a l’instanciation. Cette ligne crée fondamentalement une promesse. Une promesse en JS a besoin de quelque chose à faire, une tâche. Donc la fonction que vous voyez être passée ici – function (resolve,reject) {…} est cette tâche
- Après, vous voyez le corps de la tâche. Vous pouvez faire des choses ici. Quelque part dans ce bloc de code, vous devez décider si les choses se sont bien passées ou non. Par exemple, si vous utilisiez cet espace pour récupérer une image, soit vous l’avez reçue (ça s’est bien passé)… soit vous ne l’avez pas reçue (pas si bien).
- Si les choses se sont bien passées, vous appellerez une fonction qui marquera cette promesse comme « résolue ». Si les choses ne se sont pas passées comme prévu, vous allez « rejeter » cette promesse. (nous en parlerons plus en détail dans une seconde)
Maintenant, concentrons-nous sur la partie restante de l’extrait de code, les lignes 17-27:
- Jusqu’ici, dans les lignes 1-15, vous avez seulement défini votre objet Promise
- Au niveau des lignes 17 & 22, vous lui attachez essentiellement un gestionnaire
- promesse.XXXX (où XXX pourrait être « .then » ou « .catch » etc.) exécute fondamentalement la fonction définie dans la promesse (lignes 1-15). En fonction de la façon dont les choses se sont déroulées (résolues ou rejetées), elles appelleront respectivement les fonctions « .then » et « .catch ». Ainsi, si votre promesse a été résolue (…les choses se sont bien passées), la fonction à l’intérieur de .then(…) sera exécutée, sinon la fonction dans .catch(…) est exécutée.
NOTE:
- « .then(function) » renvoie une promesse. De plus, vous ne pouvez appeler « .then(…) » ou « .catch(…) » que sur des objets Promise.
Maintenant que nous avons couvert les bases, examinons un exemple plus intéressant de ce que nous pouvons faire avec les Promises.
Chaînage de Promises pour effectuer des requêtes multiples
Problème : Récemment, j’ai rencontré une situation où dans j’avais besoin de récupérer un tas d’URL les unes après les autres. Cependant, la réponse pour chaque URL devait être traitée différemment en fonction de l’URL.
Pour le bien de ce post, supposons que les urls récupérées sont :
- google.com
- apple.com
- amazon.com
Voici une version simplifiée du script que j’ai utilisé pour gérer ceci:
Décomposons ceci:
- Lignes 1-11 : Créer un simple wrapper autour de la méthode AJAX Get fournie par jQuery. Cela passera simplement la réponse au callback spécifié.
- Lignes 18-51 : Je crée ensuite trois fonctions (oui ! Des fonctions !) qui renvoient une promesse JS
- Chaque promesse fait ceci en interne – utilise le wrapper Ajax pour récupérer son url, et une fois les données/réponses reçues, elle fait quelque chose avec les données et appelle finalement « resolve() »
- À la ligne 54 : J’enchaîne ces promesses l’une après l’autre. Notez, que chacune de ces fonctions renvoie une promesse (et n’est pas une promesse en soi). C’est pourquoi j’utilise « first() ».then(…) par opposition à « first.then(…) »
Pour clarifier davantage, voici une façon de regarder la chaîne de promesses.
De cette manière, vous pouvez obtenir séquentiellement chaque URL, la traiter comme vous le souhaitez et déclencher la fonction « resolved() » pour déclencher la prochaine Promesse dans la chaîne 🙂
Note : si vous essayez d’exécuter le bout de code ci-dessus dans le navigateur, vous devrez activer CORS. Voici une extension chrome qui peut aider à le faire avec un simple clic.
J’espère que vous avez apprécié ce post.