Fetch API – Consommer un Service Web Rest

Cet article va présenter l’API Fetch de Javascript, et des exemples d’utilisations pour des appels de Web Services Rest. Avec des exemples de codes en ligne.

L’API Fetch de Javascript

La nouvelle API Fetch de Javascript nous fournit une interface pour consommer des ressources. Sa logique de fonctionnement est assez similaire à celle de l’API XMLHttpRequest.

De plus, elle définit des concepts comme CORS et l’en-tete Http Origin.

Pour les exemples de code, nous utiliserons une API Rest d’exemple, qui charge des données de démonstration.

Requête GET

Appeler un WS en GET et retourner le résultat en JSON

Voir l’exemple @ JSFiddle

Requête POST avec des données dans le corps

Voir le code en action

En-têtes

On peut facilement préciser des en-têtes pour la requête, par une Map ou en utilisant l’interface Headers. Pour ensuite passer cette Map aux options de la requête.

Content-type or Origin sont deux exemples d’en-têtes utiles pour les requêtes Rest.

Voir le code

La Réponse

Comme ça a été vu dans les exemples précédents, la réponse est retournée quand la promesse du fetch est résolue. Cette réponse contient surtout le statut et le code de la réponse.

On peut accéder aux données du corps de la requête avec d’autres méthodes, en fonction du type attendu (text, JSON, blob…).

Compatibilité

L’API Fetch est une fonctionnalité récente qui n’est implémentée que dans les versions récentes des navigateurs. On peut tester la présence/absence de la fonctionnalité par la présence de la méthode fetch.

Liens utiles

Mozilla Documentation

Browser Compatibility

Vous aimerez aussi...

Laisser un commentaire

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