Dans ce guide, je vais vous montrer comment utiliser l’API Fetch (ES6+) pour effectuer des requêtes HTTP vers une API REST avec quelques exemples pratiques que vous rencontrerez le plus souvent.
Voulez-vous voir rapidement les exemples HTTP ? Allez à la section 5. La première partie décrit la partie asynchrone de JavaScript lors du travail avec des requêtes HTTP.
Pour manipuler davantage une ressource, nous utilisons souvent ces méthodes JS (recommandées) telles que .map(), .filter() et .reduce().
Voici ce que nous allons aborder :
- Traiter les requêtes HTTP asynchrones de JS
- Qu’est-ce qu’AJAX ?
- Pourquoi l’API Fetch ?
- Introduction rapide à l’API Fetch
- Fetch API – exemples CRUD
- Conclusion
1/ Traiter les requêtes HTTP asynchrones de JS
L’une des parties les plus difficiles à comprendre dans le fonctionnement de JavaScript (JS) est de savoir comment gérer les requêtes asynchrones, ce qui nécessite une compréhension de la façon dont les promesses et les callbacks fonctionnent.
Dans la plupart des langages de programmation, nous sommes habitués à penser que les opérations s’exécutent dans l’ordre (de manière séquentielle). La première ligne doit être exécutée avant de passer à la ligne suivante. Cela a du sens car c’est ainsi que nous, les humains, accomplissons nos tâches quotidiennes.
Mais avec JS, nous avons plusieurs opérations qui s’exécutent en arrière-plan/avant-plan, et nous ne pouvons pas avoir une application web qui se bloque chaque fois qu’elle attend un événement utilisateur.
Descrire JavaScript comme asynchrone est peut-être trompeur. Il est plus juste de dire que JavaScript est synchrone et monothread avec divers mécanismes de rappel. En savoir plus. Néanmoins, parfois les choses doivent se dérouler dans l’ordre, sinon cela causera le chaos et des résultats inattendus. Pour cette raison, nous pouvons utiliser des promesses et des callbacks pour la structurer. Un exemple pourrait être la validation des informations d’identification de l’utilisateur avant de passer à l’opération suivante.
2/ Qu’est-ce qu’AJAX ?
AJAX signifie Asynchronous JavaScript and XML, et il permet aux pages web d’être mises à jour de manière asynchrone en échangeant des données avec un serveur web pendant que l’application est en cours d’exécution. En résumé, cela signifie essentiellement que vous pouvez mettre à jour des parties d’une page web sans recharger la page entière (l’URL reste la même).
AJAX est un nom trompeur. Les applications AJAX peuvent utiliser XML pour transporter des données, mais il est tout aussi courant de transporter des données sous forme de texte brut ou de texte JSON.
AJAX à fond ? J’ai vu que beaucoup de développeurs ont tendance à être très enthousiastes à l’idée d’avoir tout dans une application à page unique (Single Page Application, SPA), et cela entraîne beaucoup de douleur asynchrone ! Heureusement, nous avons des bibliothèques telles que Angular, VueJS et React qui facilitent considérablement ce processus et le rendent plus pratique.
En général, il est important d’avoir un équilibre entre ce qui doit recharger la page entière ou une partie de la page. Et dans la plupart des cas, un rechargement de page fonctionne bien en termes de puissance des navigateurs. Autrefois, un rechargement de page prenait des secondes (selon l’emplacement du serveur et les capacités du navigateur). Mais les navigateurs d’aujourd’hui sont extrêmement rapides, il n’y a donc pas tant de différence entre effectuer une requête AJAX ou un rechargement de page.
Mon expérience personnelle est qu’il est beaucoup plus facile et plus rapide de créer un moteur de recherche avec un simple bouton de recherche qu’avec un bouton. Et dans la plupart des cas, le client ne se soucie pas si c’est une SPA ou un rechargement de page supplémentaire. Bien sûr, ne vous méprenez pas, j’aime vraiment les SPAs, mais nous devons considérer quelques compromis, si nous avons un budget limité et peu de ressources, alors peut-être qu’une solution rapide est une meilleure approche.
En fin de compte, cela dépend vraiment de l’utilisation, mais personnellement, je pense que les SPAs nécessitent plus de temps de développement et un peu de mal de tête qu’un simple rechargement de page.
3/ Pourquoi l’API Fetch ?
Cela permet aux navigateurs de disposer d’un moyen de faire des requêtes HTTP sans avoir à utiliser l’objet XMLHttpRequest, qui est lourd et difficile à utiliser.
En outre, l’API Fetch utilise les promesses, ce qui la rend plus facile à utiliser et à comprendre que l’objet XMLHttpRequest. Les promesses sont une façon de structurer le code asynchrone de manière plus claire et plus lisible, en utilisant une syntaxe similaire à celle des fonctions flèches.
Voici un exemple de requête HTTP avec l’objet XMLHttpRequest :
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api/users');
xhr.onload = function() {
if (xhr.status === 200) {
console.log(xhr.responseText);
} else {
console.error(xhr.statusText);4/ Introduction rapide à l’API Fetch
L’API Fetch est une interface JavaScript pour réaliser des requêtes réseau. Elle a été introduite dans les navigateurs avec la spécification ES6 et est devenue un standard de facto pour effectuer des requêtes HTTP.
Voici comment utiliser l’API Fetch pour effectuer une requête HTTP GET simple :
fetch('https://example.com/api/users')
.then(response => response.text())
.then(data => console.log(data))
.catch(error => console.error(error));
La méthode Fetch prend en premier argument l’URL de la ressource à récupérer, et en option un objet de options qui permet de définir les détails de la requête, tels que le méthode HTTP, les en-têtes, le corps de la requête, etc.
Voici un exemple de requête HTTP POST avec des en-têtes et un corps de requête :
fetch('https://example.com/api/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
username: 'john',
password: 'doe'
})
})
.then(response => response.text())
.then(data => console.log(data))
.catch(error => console.error(error));
Il est également possible d’envoyer des données de formulaire avec l’API Fetch en utilisant l’objet FormData :
const formData = new FormData();
formData.append('username', 'john');
formData.append('password', 'doe');
fetch('https://example.com/api/users', {
method: 'POST',
body: formData
})
.then(response => response.text())
.then(data => console.log(data))
.catch(error => console.error(error));
L’API Fetch retourne une promesse qui résout avec une réponse HTTP. La réponse HTTP est un objet qui contient des informations sur la réponse du serveur, telles que le statut, les en-têtes, etc. Pour obtenir le corps de la réponse, il faut utiliser une des méthodes de transformation de corps de réponse, telles que response.text() pour obtenir le corps de la réponse en tant que chaîne de caractères, ou response.json() pour obtenir le corps de la réponse en tant qu’objet JavaScript.
Voici un exemple qui utilise la méthode response.json() pour récupérer le corps de la réponse en tant qu’objet JSON :
fetch('https://example.com/api/users')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
Il est également possible de gérer les erreurs de réponse en utilisant la méthode response.ok qui retourne un booléen indiquant si la réponse a un statut entre 200 et 299 inclusivement. Voici un exemple qui vérifie le statut de la réponse avant de traiter le corps de la réponse :
fetch('https://example.com/api/users')
.then(response => {
if (!response.ok) {
throw new Error(response.statusText);
}
return response.json();
})
.then(data => console.log(data))
.catch(error => console.error(error));
5/ Fetch API – exemples CRUD
Maintenant que nous avons vu comment effectuer des requêtes HTTP avec l’API Fetch, voyons comment utiliser cette API pour réaliser les opérations CRUD (create, read, update, delete) courantes.
Voici un exemple de requête HTTP GET pour récupérer la liste des utilisateurs :
fetch('https://example.com/api/users')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
Voici un exemple de requête HTTP POST pour créer un nouvel utilisateur :
fetch('https://example.com/api/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
username: 'john',
password: 'doe'
})
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
Voici un exemple de requête HTTP PUT pour mettre à jour un utilisateur existant :
fetch('https://example.com/api/users/1', {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
username: 'jane',
password: 'doe'
})
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));Conclusion
En conclusion, l’API Fetch est un moyen simple et standardisé d’effectuer des requêtes HTTP dans les navigateurs modernes, qui a été introduit dans la spécification ES6. Elle permet de réaliser facilement toutes sortes d’opérations CRUD, et offre une syntaxe flexible pour envoyer et recevoir des données, ainsi qu’une gestion centralisée des erreurs grâce aux promesses.
Cependant, il convient de noter que l’API Fetch n’est pas compatible avec tous les navigateurs, et ne gère pas automatiquement la gestion des jetons d’authentification ou la gestion des erreurs d’autorisation. Pour ces cas d’utilisation, il est recommandé d’utiliser une bibliothèque de gestion de requêtes HTTP telle que axios ou superagent.
Dans quels cas d’utilisation pensez-vous que l’API Fetch est particulièrement utile ?
Avez-vous déjà utilisé l’API Fetch dans vos projets ? Si oui, quelles ont été vos impressions ?
Quelles sont les limites de l’API Fetch selon vous, et comment les avez-vous contournées ?
Connaissez-vous d’autres alternatives à l’API Fetch pour effectuer des requêtes HTTP dans les navigateurs ? Si oui, lesquelles et pourquoi les préférez-vous à l’API Fetch ?
0 commentaire