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.

401 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
279 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
4 394 vues
Le langage CSS
Le CSS permet de concevoir le design de votre site web. Le CSS agit sur des éléments HTML.On peut intégrer le CSS de deux façons :Directement sur les éléments de votre HTML,Mettre le...
Créer son site
320 vues
CSS interne : l'utilisation de balises <style> dans la section <head> du document HTML
CSS Interne : L'utilisation de balises <style> dans la section <head> du document HTMLLe CSS interne est une méthode de stylisation où les styles sont définis directement dans la...
CSS
8 711 vues
Introduction
Je vous propose un cours afin de concevoir votre premier site de A à Z incluant un espace membre, un forum & un blog 😎Les objectif de ce cours :L'objectif et de ce familiariser avec les...
Créer son site
1 679 vues
Afficher les messages dans l'ordre
Dans cette vidéo on va personnaliser (un peu) l'interface des conversations avec du CSS.Nous allons également remettre les messages dans l'ordre et lors de la réception du message par le...
Créer son site de rencontres
3 291 vues
Faire une demande d'ami
Maintenant que notre base de données est créée, nous allons nous attaquer à la partie visuelle de notre système d'amis.Pour commencer nous allons créer notre formulaire pour faire une demande...
Créer son site
3 008 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
2 585 vues
Supprimer un ami
Nous allons repartir sur notre page voir_profil.php afin de compléter le code ci-dessous.<form method="post">   <?php     if(!isset($relation['id'])){   ?>  ...
Créer son site
Publicité
Cette pub permet au site de vivre ...