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.

247 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
383 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
238 vues
Les promesses
Les Promesses en JavaScriptLes promesses sont un mécanisme de gestion asynchrone en JavaScript qui permet de gérer plus facilement les opérations asynchrones et d'éviter le "callback hell". Les...
JS
1 356 vues
Voir plus de messages (1/2)
Dans cette nouvelle vidéo nous allons ajouter un bouton 'voir plus' qui va nous permettre de voir d'anciens messages. Nous allons commencer par mettre en place le bouton suivi du procédé pour voir...
Créer son site de rencontres
576 vues
Utilisation des clauses WHERE, ORDER BY, GROUP BY et LIMIT pour filtrer et trier les résultats
1. Utilisation de la Clause WHERE pour Filtrer les Résultats :La clause WHERE est utilisée pour filtrer les résultats en fonction de certaines conditions.SELECT colonne1, colonne2, ... FROM...
SQL
2 474 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
6 150 vues
Créer son forum
Après avoir terminer les articles pour développer votre site de A à Z maintenant nous allons nous attaquer à la création d'un forum complet !Pour commencer nous allons...
Créer son site
2 309 vues
Configuration de PhpMyAdmin pour se connecter à votre serveur de base de données
1. Accéder au Fichier de Configuration :Après avoir téléchargé et installé PhpMyAdmin sur votre serveur, accédez au répertoire où PhpMyAdmin est installé.Cherchez le fichier de...
SQL
11 698 vues
Barre de recherche : Ajax
À partir de maintenant nous allons développer notre script permettant de contacter une page et de l'exécuter afin d'afficher le résultat de notre saisie.Nous allons commencer par mettre cette...
Créer son site
Publicité
Cette pub permet au site de vivre ...