Utilisation de Fetch pour effectuer des requêtes HTTP

Utilisation de Fetch pour Effectuer des Requêtes HTTP

La méthode Fetch est une fonction native de JavaScript utilisée pour effectuer des requêtes HTTP vers des ressources distantes, telles que des API REST. Elle fournit une interface simple et puissante pour envoyer et recevoir des données via HTTP.

1. Effectuer une Requête GET :

Vous pouvez utiliser la méthode Fetch pour effectuer une requête GET en spécifiant simplement l'URL de la ressource que vous souhaitez récupérer.

Exemple d'une Requête GET avec Fetch :

fetch('https://api.example.com/data')
    .then(response => {
        if (!response.ok) {
            throw new Error('La requête a échoué');
        }
        return response.json();
    })
    .then(data => console.log(data))
    .catch(error => console.error('Erreur : ' + error));

2. Effectuer une Requête POST :

Pour effectuer une requête POST avec Fetch, vous devez inclure un objet de configuration contenant les options de la requête, telles que la méthode, les en-têtes et les données à envoyer.

Exemple d'une Requête POST avec Fetch :

fetch('https://api.example.com/postData', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ nom: 'John', age: 30 })
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('La requête a échoué');
        }
        return response.json();
    })
    .then(data => console.log(data))
    .catch(error => console.error('Erreur : ' + error));

3. Gestion des Réponses :

Après avoir effectué une requête avec Fetch, vous devez gérer la réponse renvoyée par le serveur. Vous pouvez accéder aux données de la réponse en utilisant les méthodes .json(), .text(), .blob(), etc.

Exemple de Gestion des Réponses avec Fetch :

fetch('https://api.example.com/data')
    .then(response => {
        if (!response.ok) {
            throw new Error('La requête a échoué');
        }
        return response.text();
    })
    .then(text => console.log(text))
    .catch(error => console.error('Erreur : ' + error));

4. Gestion des Erreurs :

Vous pouvez utiliser la méthode .catch() pour capturer les erreurs survenues pendant la requête, telles que les erreurs de réseau, les erreurs de serveur, etc.

Exemple de Gestion des Erreurs avec Fetch :

fetch('https://api.example.com/data')
    .then(response => {
        if (!response.ok) {
            throw new Error('La requête a échoué');
        }
        return response.json();
    })
    .then(data => console.log(data))
    .catch(error => console.error('Erreur : ' + error));

5. Utilisation d'Options de Requête :

Vous pouvez inclure diverses options de requête, telles que les en-têtes personnalisés, les méthodes HTTP autres que GET ou POST, etc.

Exemple d'Utilisation d'Options de Requête avec Fetch :

fetch('https://api.example.com/data', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer token'
        },
        body: JSON.stringify({ nom: 'John', age: 30 })
    })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Erreur : ' + error));

En résumé, la méthode Fetch en JavaScript est un outil puissant pour effectuer des requêtes HTTP vers des ressources distantes. En comprenant comment l'utiliser pour effectuer des requêtes GET, POST, gérer les réponses et les erreurs, vous pouvez interagir efficacement avec des API REST et intégrer des données externes dans vos applications web.