Comment utiliser l'API Fetch de JavaScript pour faire des requêtes HTTP ?
19/03/2024
•
5
min
L'API Fetch en JavaScript est une interface moderne pour effectuer des requêtes HTTP. Elle fournit une méthode globale fetch() qui offre un moyen facile et logique de récupérer des ressources de manière asynchrone à travers le réseau.
Cette fonctionnalité était auparavant réalisée à l'aide de XMLHttpRequest. Fetch offre une meilleure alternative qui peut être facilement utilisée par d'autres technologies telles que les Service Workers.
Voici un exemple d'utilisation de l'API Fetch (utilisée avec le serveur JSON) :
<!DOCTYPE html>
<html>
<head>
<title>API Fetch</title>
</head>
<body>
<script>
fetch('https://jsonplaceholder.typicode.com/posts') // Envoie une requête GET à une URL spécifique
.then(response => response.json()) // La promesse fetch() se résout en un objet Response qui représente la réponse à la requête et inclut le statut de la demande
.then(data => {
console.log(data) // 'data' contient maintenant la réponse du serveur
})
.catch((error) => {
console.error('Erreur:', error) // S'il y a une erreur dans la requête, elle est capturée ici
});
</script>
</body>
</html>
Ask your specific question in Mate AI
In Mate you can connect your project, ask questions about your repository, and use AI Agent to solve programming tasks
Maintenant, voyons comment faire une requête POST avec l'API Fetch :
<!DOCTYPE html>
<html>
<head>
<title>API Fetch</title>
</head>
<body>
<script>
const data = {
title: 'foo',
body: 'bar',
userId: 1
};
fetch('https://jsonplaceholder.typicode.com/posts', { // Envoie une requête POST à une URL spécifique
method: 'POST', // Spécifie la méthode de la requête
headers: {
'Content-Type': 'application/json' // Spécifie le type de données
},
body: JSON.stringify(data) // Convertit l'objet JavaScript en une chaîne
})
.then(response => response.json())
.then(data => {
console.log(data) // 'data' contient maintenant la réponse du serveur
})
.catch((error) => {
console.error('Erreur:', error)
});
</script>
</body>
</html>
Dans le code ci-dessus, method: 'POST' précise que la méthode de requête à utiliser est POST. headers: { 'Content-Type': 'application/json' } spécifie que le type de contenu doit être JSON. body: JSON.stringify(data) convertit l'objet JavaScript en une chaîne.
AI agent for developers
Boost your productivity with Mate:
easily connect your project, generate code, and debug smarter - all powered by AI.
Do you want to solve problems like this faster? Download now for free.