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.

177 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
384 vues
Propriétés CSS : comprendre les différentes propriétés et leurs valeurs
Propriétés CSS : Comprendre les différentes propriétés et leurs valeursLes propriétés CSS sont des instructions qui contrôlent l'apparence et le comportement des éléments HTML sur une page...
CSS
267 vues
Comprendre les concepts de marge, bordure, rembourrage et largeur/hauteur
Dans CSS, la mise en page des éléments est souvent influencée par quatre concepts clés : la marge, la bordure, le rembourrage et la largeur/hauteur. Comprendre ces concepts est essentiel pour...
CSS
2 442 vues
Différences entre SASS et CSS
Différences entre SASS et CSS1. Syntaxe :CSS : Utilise une syntaxe simple basée sur des sélecteurs et des propriétés.SASS : Propose une syntaxe étendue avec des fonctionnalités telles que les...
Sass
142 vues
Gestion des exceptions
Gestion des Exceptions en JavaScriptLa gestion des exceptions en JavaScript permet de détecter, signaler et gérer les erreurs qui surviennent lors de l'exécution d'un programme. Les exceptions...
JS
3 768 vues
Utilisation des balises <h1> à <h6> pour les titres
Utilisation des balises <h1> à <h6> pour les titresLes balises <h1> à <h6> sont utilisées pour définir les niveaux de titre dans une page HTML. Elles vont du titre le plus...
HTML
1 730 vues
Envoyer un message sans recharger la page (2/2)
Comme nous avons mis en place notre système en JavaScript / Ajax pour envoyer un message sans recharger notre page en cours nous allons maintenant enregistrer le message + afficher ce dernier dans...
Créer son site de rencontres
3 693 vues
Créer un article
Créer un articleNous allons créer une nouvelle page que l'on nommera creer_article.php. Cette page permettra de créer un article qui sera visible sur le blog.Nous allons modifier notre...
Créer son site
223 vues
Déclaration de fonctions
Déclaration de Fonctions en JavaScriptEn JavaScript, les fonctions sont des blocs de code réutilisables qui peuvent être appelés pour effectuer une tâche spécifique. Elles peuvent prendre des...
JS
Publicité
Cette pub permet au site de vivre ...