Blog

Node JS est complexe, ce langage utilise l’asynchronisme comme moteur principal. Le code ne s’exécute pas dans son ordre normal, de haut en bas.

Node JS optimise la vitesse du programme en exécutant du code qui n’es pas dans l’ordre basique. Sauf que cette solution pose souvent des problèmes.

Par exemple, si vous devez attendre la fin d’un téléchargement pour ensuite manipuler les données, si vous ne mettez rien en place, Node JS va essayer de manipuler les données avant d’avoir finit le téléchargement, c’est simplement impossible.

Ce genre d’erreur dans le code, c’est classique. Ça arrive à tout les débutants. Normalement, NodeJS fonctionne avec un système de callback. On passe une fonction à la fin de notre fonction principale, ainsi, le code attendra la réponse avant de continuer.

Malheureusement, les callback sont complexes et ils mènent rapidement au callback hell :

Ici, le programmeur lance une fonction à la fin d’une autre. On obtiens un résultat illisible. C’est l’enfer.

Aujourd’hui, on possède deux solutions pour éviter ce genre de code, les promesses et l’async await.

Dans ce cour, je vais vous montrer comment utiliser les promesses, vous allez voir que c’est vraiment simple et très efficace.

Je vais d’abord vous montrer comment manipuler des fonctions promesses. Ensuite, nous verrons comment en créer

Comment utiliser des promesses

Lorsqu’une fonction promesse est appelée, trois nouveaux mots clés sont disponibles, then, catch et finally. Voyons comment les utiliser

Imaginez un appel AJAX avec axios, voici la marche à suivre pour afficher les données téléchargés dans la console

axios.get('url')
            .then(data => {
                console.log(data.data)
            })

Ici, on appelle notre fonction et on utilise le mot clé then. Dans celui-ci, on passe une fonction qui va être exécutée, j’utilise la syntaxe arrow mais ça fonctionne aussi avec le mot clé function :

        axios.get('url')
            .then(function(data){
                console.log(data.data)
            })

La fonction que l’on crée récupère comme argument ce que retourne notre fonction de base. On peux tout à fait récupérer plusieurs arguments. Ensuite, on fait ce que l’on veux avec les données.

Il est d’ailleurs possible d’empiler plusieurs then

 axios.get('url')
            .then(data => {
                console.log(data.data)
            })
            .then(data => {
                console.log('une autre action')
            })

Ici, le second block then récupérera en données ce que le premier block then renvoi, en l’occurrence, rien.

Si on veux aussi lui passer les données de la requête axios, il suffit de faire ça :

axios.get('url')
            .then(data => {
                console.log(data.data)
                return data
            })
            .then(data => {
                console.log('une autre action')
            })

Le mot clé catch

Parfois, une promesse envoi une erreur. Pour les gérer, on utilise le mot clé catch, il fonctionne exactement comme then mais il s’exécute lorsqu’il y a une erreur. A noter qu’en cas d’erreur, les blocs then ne s’exécutent pas

axios.get('url')
            .then(data => {
                console.log(data.data)
                return data
            })
            .then(data => {
                console.log('une autre action')
            })
            .catch(error => {
                console.log('nous avons eu une erreur')
            })

Le bloc finally

Pour finir, il y a un bloc qui n’es pas souvent utilisé, mais il permets d’exécuter une fonction peu importe le déroulement de la promesse. Qu’elle réussisse ou échoue, la fonction finally sera exécutée en dernier.

axios.get('url')
            .then(data => {
                console.log(data.data)
                return data
            })
            .then(data => {
                console.log('une autre action')
            })
            .catch(error => {
                console.log('nous avons eu une erreur')
            })
            .finally(() => {
                console.log('après la fonction.')
            })

C’est tout pour les manipulations des promesses, voyons maintenant comment en créer.

Comment créer une fonction promesse

Pour finir, voyons comment créer une fonction promesse en Javascript. Pour se faire, nous allons créer un objet Promise, celui-ci est crée au début de notre fonction et il va retourner une réussite ou un echec, respectivement pour les blocs then et catch

function promesse(){
            return new Promise(function(resolve, reject){
                // Si la fonction réussie
                return resolve('data')
                // si la fonction échoue
                // return reject('data')
            })
        }

En fait, dans notre fonction on retourne directement un object promesse avec comme argument une fonction avec resolve et reject.

Vous faites votre code, par exemple une requête axios, et si elle réussie, vous retournez resolve avec les données en parenthèses. Si elle échoue, vous retournez reject avec l’erreur.

Comme vous le voyez, c’est plutôt simple en fait. Il suffit de retourner un objet et de lui passer une fonction avec des arguments.

En conclusion

Les promesses permettent de simplifier énormément le code asynchrone. Il suffit d’utiliser les mots clés then, catch et finally.

Pour créer des promesses, vous devez créer un objet Promise et lui passer en argument une fonction avec resolve et reject. Il suffit de retourner un des deux arguments pour faire réussir ou échouer la promesse.

J’espère que cet article vous aura permis de mieux comprendre le fonctionnement des promesses en Javascript. Si c’est le cas, n’hésitez pas à me laisser un commentaire, idem si vous avez une question.

Si cet article vous as plu, vous pouvez vous abonner à ma newsletter pour recevoir le guide GRATUIT pour bien débuter la programmation