DEV Community

Cover image for Comment utiliser le Middleware dans Express JS
Valentin Nasibu for KADEA ACADEMY

Posted on

Comment utiliser le Middleware dans Express JS

Lorsqu’on crée une application express, ceci n’est ni plus, ni moins qu’une succession des fonctions middleware

A. Définitions

Avant de définir une middleware, comprenons d’abord ce que s’est Express JS. Express JS est un framework permettant de construire proprement des applications web basées sur Node JS facile à maintenir.

Qu’est ce qu’une fonction middleware alors ?

Selon le site officiel d’Express js, une fonction middleware “est une fonction qui peut accéder à l’objet Request(req), l’objet Response (res) et à la fonction middleware suivant dans le cycle demande-réponse de l’application désignée par une variable nommée (next)”.

Elle a comme rôles :

  • Exécuter les codes (de tout type) ;

  • Apporter des modifications aux objets de demande(req) et de réponse(res) ;

  • Terminer le cycle de demande-réponse(req-res) ;

  • Appeler le middleware suivant (next) dans la pile.

B. Types

On peut charger le middleware à plusieurs niveaux :

1. Niveau application
Voici un exemple d’une fonction middleware qui affiche l’heure à laquelle la requête à été envoyé au serveur ; utilisant les fonctions app.use() et app.METHOD(), où METHOD est la méthode HTTP (Get, Post & Put).

Image description

2. Niveau Routeur
Le fonctionnement du middleware niveau routeur est identique qu’avec les middleware niveau application ; contrairement à ces dernières, elles sont liées à l’instance express.Router().

Prenons l’exemple précédent et appliquons maintenant notre middleware au niveau de routeur :

Image description

3. Traitement d’erreurs

Contrairement aux deux types précédents, les middlewares de traitement d’erreur comprennent toujours 4 arguments (err, req, res, next). Même si vous n’avez pas besoin d’utiliser l’objet next, vous devez le spécifier pour maintenir la signature. Sinon, l’objet next sera interprété comme un middleware ordinaire et n’arrivera pas à gérer les erreurs.

Revenons toujours dans le premier exemple et ajoutons maintenant notre middleware de traitement d’erreurs juste après :

Image description
Essayons maintenant de provoquer une erreur (en écrivant reqe.reqTime à la place req.reqTime), vous allez remarquer avec moi, que notre middleware de traitement d’erreur va automatiquement être appelé et affichera le message “Something broke!” à l’utilisateur.

4. Le Middleware intégré

Depuis la version 4.x d’express, il n’existe qu’une seule fonction middleware qui est intégrée dans express. Il s’agit de la fonction “express.static” ; elle permet de servir les ressources (actifs) statiques d’une application express.

Exemple : les images, vidéos, documents, etc…

syntaxe : express.static(“root”, [options])
root représente le nom du répertoire qui contient les actifs à servir et options qui représente quelques options facultatives à mettre notamment redirect, setHeader, …

Supposons maintenant qu’on a un dossier “public” dans le répertoire de notre projet où on y met quelques images à afficher.

Au niveau de notre serveur, nous aurons comme code :

Image description

Ainsi dans notre fichier view (ex. index.ejx), nous pouvons maintenant insérer nos images à afficher.

Image description
Vous allez remarquer sur le path de l’image, je n’ai plus la peine de préciser le nom du dossier, plutôt que le nom de l’image et son extension uniquement.

5. Les Middlewares tiers

Pour rendre le développement facile, en ajoutant d’autres fonctionnalités à votre application, plusieurs middlewares tiers ont été développés. Ex. Morgan, cookie-parser, etc …

Pour pouvoir les utiliser, il faut commencer par Installer le module Node.js pour la fonctionnalité requise, puis chargez-le dans votre application (ça peut être au niveau application, tout comme au niveau router).

voici un exemple qui illustre l’installation et le chargement de la fonction middleware Morgan (permet de voir le temps d’exécution d’une requête) :

installation ; sur votre terminal, taper :

$ npm install morgan
Enter fullscreen mode Exit fullscreen mode

Importons et utilisons maintenant notre module sur notre serveur :

Image description

Conclusion

Tout au long de cet article, nous avons parlé au sujet des fonctions Middleware. nous devons retenir qu’une fonction middleware n’est qu’une fonction qui s’exécute lorsque le serveur reçoit une requête et envoie la réponse. Elle se situe entre la requête et la réponse.

Une application express peut utiliser de middleware du type intégré ou tiers, de traitement d’erreurs, du niveau application ou encore du niveau routeur.

Merci !

Si vous avez de question, n’hésitez pas à nous contacté sur LinkedIn et si vous avez aimé, n’hésitez pas de partager le lien de l’article avec vos ami-e-s.

Top comments (0)