5.1 Fetch API
Pour réaliser des requêtes HTTP en JavaScript, on utilise souvent deux bibliothèques : la fonction intégrée fetch et la bibliothèque tierce Axios. Les deux offrent des possibilités puissantes et flexibles pour interagir avec les API et autres ressources web.
Fetch API est une méthode intégrée dans le navigateur pour réaliser des requêtes HTTP. Elle est basée sur les promesses et offre une approche moderne et flexible pour travailler avec les requêtes réseau.
Syntaxe d'une simple requête fetch :
let promise = fetch(url, {method, headers,
body})
Concepts principaux de Fetch :
fetch(url, options): la méthode principale pour réaliser des requêtes HTTP- Retourne une promesse qui se résout en un objet Response
Exemple d'une simple requête GET utilisant Fetch :
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => {
if (!response.ok) {
throw new Error('Erreur réseau : réponse incorrecte du serveur');
}
return response.json();
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Erreur lors de l\'exécution de la requête : ', error);
});
Exemple d'une requête POST utilisant Fetch :
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
title: 'foo',
body: 'bar',
userId: 1
})
})
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Erreur lors de l\'exécution de la requête : ', error);
});
Paramètres de Fetch
Fetch API permet de configurer différents paramètres de la requête via l'objet options, tels que la méthode, les en-têtes, le corps de la requête, et bien d'autres.
const options = {
method: 'GET', // ou 'POST', 'PUT', 'DELETE', etc.
headers: {
'Content-Type': 'application/json'
},
// body: JSON.stringify(data) // utilisé pour les requêtes POST et PUT
};
fetch('https://jsonplaceholder.typicode.com/posts/1', options)
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Erreur lors de l\'exécution de la requête : ', error));
5.2 Bibliothèque Axios
Axios est une bibliothèque populaire pour réaliser des requêtes HTTP en JavaScript. Elle offre une API plus pratique et fonctionnelle comparée au Fetch API natif, et supporte de nombreuses fonctionnalités supplémentaires, comme la conversion automatique des JSON, la gestion des délais d'attente, l'annulation des requêtes et la prise en charge des anciens navigateurs.
Installation d'Axios
Axios peut être installé via npm ou connecté via un CDN.
Installation via npm :
npm install axios
Connexion dans Node.js ou lors de l'utilisation de gestionnaires de modules (par exemple, Webpack) :
// Pour CommonJS
const axios = require('axios');
// Pour les modules ES6
import axios from 'axios';
Connexion via un CDN dans le navigateur :
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
Syntaxe d'une simple requête GET :
let promise = axios.get(url)
Syntaxe d'une simple requête POST :
let promise = axios.post(url, data, config)
Concepts principaux d'Axios :
- axios(config) : la méthode principale pour réaliser des requêtes HTTP
- Prend en paramètre un objet de configuration qui peut inclure
url,method,headers,data, et autres paramètres. - Méthodes abrégées : Axios propose des méthodes pour chaque méthode HTTP (
axios.get,axios.post,axios.put,axios.delete, etc.), ce qui simplifie la réalisation des requêtes correspondantes. - Promises : toutes les méthodes d'Axios retournent une Promesse (promise), qui se résout en un objet de réponse ou se rejette en cas d'erreur.
Syntaxe d'une simple requête GET avec gestion de la réponse et des erreurs :
axios.get(url)
.then(response => {
// Gestion de la réponse réussie
})
.catch(error => {
// Gestion de l'erreur
});
Syntaxe d'une simple requête POST avec gestion de la réponse et des erreurs :
axios.post(url, data, config)
.then(response => {
// Gestion de la réponse réussie
})
.catch(error => {
// Gestion de l'erreur
});
Exemple d'une simple requête GET utilisant Axios :
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
axios.get('https://jsonplaceholder.typicode.com/posts/1')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Erreur lors de l\'exécution de la requête : ', error);
});
Exemple d'une requête POST utilisant Axios :
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
axios.post('https://jsonplaceholder.typicode.com/posts', {
title: 'foo',
body: 'bar',
userId: 1
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Erreur lors de l\'exécution de la requête : ', error);
});
5.3 Configuration d'Axios
Paramètres d'Axios
Axios permet de configurer les requêtes HTTP à l'aide de l'objet config, qui comprend des paramètres comme url, method, headers, et des données (data). Voici un exemple de configuration de requête de base :
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
const config = {
method: 'get', // peut être 'get', 'post', 'put', 'delete', etc.
url: 'https://jsonplaceholder.typicode.com/posts/1',
headers: {
'Content-Type': 'application/json' // En-tête pour indiquer le type de données
},
// data: JSON.stringify(data) // Utilisé pour les requêtes POST et PUT pour transmettre le corps de la requête
};
axios(config)
.then(response => console.log(response.data))
.catch(error => console.error('Erreur lors de l\'exécution de la requête : ', error));
Fonctionnalités supplémentaires d'Axios :
- Paramètres de requête : possibilité de passer des paramètres de requête dans l'URL.
- Annulation des requêtes : avec
AbortController. - Délais d'attente : définition d'un délai d'attente pour la requête.
Exemple d'utilisation des paramètres de requête :
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
axios.get('https://jsonplaceholder.typicode.com/posts', {
params: {
userId: 1 // Les paramètres de requête sont passés via l'objet params
}
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Erreur lors de l\'exécution de la requête : ', error);
});
5.4 Comparaison entre Fetch et Axios
Examinons maintenant Fetch et Axios en les comparant sur les principaux points :
1. Facilité d'utilisation :
- Fetch : facile à utiliser pour les opérations de base mais nécessite un traitement supplémentaire pour les scénarios complexes (par exemple, conversion de JSON, gestion des délais d'attente).
- Axios : offre une API plus conviviale et puissante pour les requêtes complexes.
2. Gestion du JSON :
- Fetch : nécessite un appel explicite à
response.json()pour convertir le corps de la réponse en JSON. - Axios : convertit automatiquement les réponses JSON.
3. Délais d'attente :
- Fetch : pas de support intégré pour les délais d'attente. Pour implémenter un délai, il faut utiliser
AbortControllerou des wrappers. - Axios : supporte la configuration des délais d'attente via la configuration.
4. Intercepteurs :
- Fetch : ne supporte pas les intercepteurs de requêtes et de réponses.
- Axios : permet d'utiliser des intercepteurs pour exécuter la logique avant et après l'envoi de la requête.
Exemple avec des intercepteurs dans Axios
Interceptors (intercepteurs) permettent d'exécuter certaines actions avant l'envoi d'une requête ou après la réception d'une réponse :
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
// Ajouter un intercepteur pour les requêtes
axios.interceptors.request.use(config => {
console.log('Requête envoyée au serveur : ', new Date());
return config;
}, error => {
return Promise.reject(error);
});
// Ajouter un intercepteur pour les réponses
axios.interceptors.response.use(response => {
console.log('Réponse reçue du serveur : ', new Date());
return response;
}, error => {
return Promise.reject(error);
});
// Exemple de requête avec intercepteurs
axios.get('https://jsonplaceholder.typicode.com/todos/1')
.then(response => console.log(response.data))
.catch(error => console.error('Erreur lors de l\'exécution de la requête : ', error));
Requêtes parallèles avec Axios
Avec Axios, on peut facilement exécuter des requêtes parallèles et traiter les résultats avec Promise.all() :
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
Promise.all([
axios.get('https://jsonplaceholder.typicode.com/todos/1'),
axios.get('https://jsonplaceholder.typicode.com/todos/2')
])
.then(responses => {
responses.forEach(response => {
console.log(response.data);
});
})
.catch(error => console.error('Erreur lors de l\'exécution de la requête : ', error));
GO TO FULL VERSION