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
|
1 2 3 4 5 6 7 8 9 10 |
// l'URL du Service Web let url = 'https://jsonplaceholder.typicode.com/posts/1'; fetch(url) .then(function(response) { // Récupérer le corps de la requete en JSON return response.json(); }) .then(function(json) { // Utiliser notre objet JSON }) |
Voir l’exemple @ JSFiddle
Requête POST avec des données dans le corps
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// l'URL du Service Web let url = 'https://jsonplaceholder.typicode.com/posts'; // Les données du POST let data = { title: 'foo', body: 'bar', userId: 1 }; // Les options de la requete let options = { method: 'POST', body: JSON.stringify(data) }; fetch(url, options) .then(function(response) { // Le résultat du POST }) |
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.
|
1 2 3 |
let headers = { "Content-type": "application/json; charset=UTF-8" }; |
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.
|
1 2 3 4 5 |
if (self.fetch) { // Lancer mon fetch ici } else { // Faire autre chose que fetch ici } |
Liens utiles
Xavier est actuellement Architecte Solutions en Freelance, et consultant technique. Il est présent depuis 10 ans dans le monde du développement informatique (Java, JEE, JavaScript, Angular, Node JS, React), et est fort de solides expériences en tant que Tech Lead ou architecte technique dans des structures de différentes tailles (PME, grand groupe, Startup), et dans différents secteurs (Assurance, Assurance Crédit, Transport, Téléphonie mobile, Energie).
Commentaires récents