JS

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.

212 vues
Posté le 07 août 2024
Publicité Sitedudev
Cette pub permet au site de vivre ...
Publicité
Cette pub permet au site de vivre ...
Voir d'autres articles
212 vues
Utilisation de Fetch pour effectuer des requêtes HTTP
Utilisation de Fetch pour Effectuer des Requêtes HTTPLa méthode Fetch est une fonction native de JavaScript utilisée pour effectuer des requêtes HTTP vers des ressources distantes, telles que des...
JS
186 vues
Modification du contenu et des styles
Modification du Contenu et des Styles des Éléments HTML en JavaScriptLa modification du contenu et des styles des éléments HTML est une tâche courante en développement web. Cela permet de...
JS
2 262 vues
Téléchargement et installation de PhpMyAdmin sur un serveur local ou distant
Téléchargement et Installation de PhpMyAdmin1. Téléchargement de PhpMyAdmin :Rendez-vous sur le site officiel de PhpMyAdmin à l'adresse https://www.phpmyadmin.net/.Cliquez sur le bouton de...
SQL
211 vues
Consommation d'API REST
Consommation d'API REST en JavaScriptLa consommation d'API REST en JavaScript est une tâche courante dans le développement web moderne. Les API REST permettent aux applications d'envoyer et de...
JS
217 vues
Passage de paramètres
Passage de Paramètres dans les Fonctions en JavaScriptLorsque vous appelez une fonction en JavaScript, vous pouvez lui transmettre des valeurs en utilisant des paramètres. Ces paramètres sont des...
JS
347 vues
Comprendre le rôle de JavaScript dans le développement web
Le rôle de JavaScript dans le développement webJavaScript est un langage de programmation qui joue un rôle crucial dans le développement web moderne. Il est largement utilisé pour rendre les...
JS
184 vues
Les callbacks
Les Callbacks en JavaScriptLes callbacks sont des fonctions passées en tant qu'arguments à d'autres fonctions, qui seront exécutées ultérieurement ou de manière asynchrone. Les callbacks sont...
JS
2 850 vues
Gestion des demandes
Nous allons maintenant nous attaquer à la gestion des demandes d'amis. Pour cela vous allez créer une nouvelle page que nous allons appeler demandes-amis.php.Dans cette nouvelle page, dans un...
Créer son site
Publicité
Cette pub permet au site de vivre ...