API Fetch - Méthode moderne d’exécuter des requêtes asynchrones

API Fetch basée sur les promesses

L’API Fetchh est une interface Javascript qui permet d’interroger le serveur à l’aide de reqûetes asynchrones, exactement comme le fait l’objet XMLHttpRequest.

L’ultime différence avec l’objet XMLHttpRequest réside dans le fait que l’API Fetch repose sur les promesses au lieu de callbaks. Donc, il permet de mieux gérer les interactions avec le serveur tout en exécutant du Javascript local, ce qui est l’essence même de la programmation asynchrone. Cette aproche permet aussi d’avoir un code organisé, lisible, facile à maintenir et faire évoluer.

Un autre avantage au compte de l’API Fetch consiste dans sa syntaxe réduite et parfois implicite comparée avec l’objet XMLHttpRequest où il faut des fois exprimer beaucoup de détails, comme l’encodage et le format de réponse.

Interroger un serveur à l’aide de l’API Fetch

On suppose que la source de données que l’on souhaite interroger est un fichier JSON nommé langages.json situé dans le même emplacement que le code Javascript à éditer. Bien entendu, vous pouvez adapter le chemin selon la situation.

Pour commencer, je propose ce code simple :
La méthode fetch accueille comme argument la ressource à interroger sur le serveur, autrement dit, notre fichier langages.json. Il s’agit là de la forme la plus simple pour exprimer la méthode fetch(). En effet, on peut ajouter d’autres arguments, notamment un objet littéral Javascript qui permet de personnaliser l’implémentation de l’API Fetch.

Dans notre cas, on a passé une requête à travers la méthode GET. Donc, le fait de ne pas expliciter la méthode sous-entend qu’il s’agit d’une requête GET.

Comme je l’ai précisé plus haut, la méthode fetch() renvoie une promesse. Donc, pour gérer celle-ci on fait appel aux méthodes then() et catch().
Une promesse réussie signifie que la ressource du serveur a été correctement interrogé et que se réponse est parvenue jusqu’au client. Cependant, une promesse réussit une fois le client reçoit les entêtes de la réponse et pas forcément la réponse entière. C’est pour cette raison que le premier then() demande à ce qu’on lui transmette la réponse sous forme d’un objet JSON, alors que le deuxième traite cette réponse-là. Dans notre cas, on l’affiche tout simplement sans formatage particulier.

La méthode catch() quant à elle, s’exécute au cas un problème survient et que le serveur ne parvient pas à transférer la réponse demandée.

En utilisant les mots-clé async et await

Il est toutefois possible de transformer le code précédent de telle sorte à ce qu'il soit implémenté à l'aide des mots-clé async et await:
N'oubliez pas que pour utiliser await, il faut le faire dans une fonction asynchrone préfixée par le mot-clé async.

Envoyer des paramètres via une requête POST

Si on veut envoyer des paramètres au serveur, on peut pour cela utiliser les autres méthodes du CRUD comme POST, PUT ou DELETE.

Si on considère que l'on utilisera la méthode POST pour envoyer des paramètres au serveur, alors le code pourrait ressembler à ceci:
Dans l'appel de la méthode Fetch, nous avons ajouté un argument supplémentaire qui consiste en un objet littéral Javascript. Dans celui-ci, on spécifie la méthode POST, les entêtes personnalisées à l'aide de la clé headers qui sous-entend dans ce cas que les paramètres seront formatés en format JSON avant d'être postés au serveur et en fin, les paramètres eux même via la clé body (formatés en JSON bien entendu). D'ailleurs, la méthode JSON.stringify() permet de transformer un objet littéral Javascript en une chaîne JSON valide.

API Fetch ou XMLHttpRequest dans un vrai projet?

Il faut retenir que l'objet XMLHttpRequest fonctionne encore très bien vu que les navigateurs le supportent parfaitement encore. Cependant, API Fetch est de plus en plus utilisé car il se base sur les promesses qui constituent une méthode moderne et élégante qui implémente la programmation asynchrone.