Try  HackMD Logo HackMD

Javascript - fetch()

fetch() est une fonction JavaScript intégrée qui permet de réaliser des requêtes réseau asynchrones (AJAX) pour récupérer des ressources depuis un serveur. Elle est introduite dans les normes ECMAScript (ES) et est prise en charge par les navigateurs modernes.

Rôle et utilité

fetch() permet d'effectuer des requêtes HTTP (GET, POST, PUT, DELETE, etc.) vers des API ou des ressources externes pour récupérer des données au format JSON, texte, HTML, etc. C'est une alternative plus moderne et native à l'utilisation d'AJAX et elle simplifie les requêtes réseau en utilisant des Promesses.

fetch() remplace JQuery ou Ajax

fetch() peut être considéré comme une alternative moderne à la méthode $.ajax() de jQuery pour effectuer des requêtes AJAX. Elle offre une syntaxe plus simple et épurée sans dépendre d'une bibliothèque externe. Cependant, fetch() est limitée aux requêtes AJAX et ne fournit pas certaines fonctionnalités avancées comme la prise en charge des anciens navigateurs, la gestion automatique des types de données, etc. Donc, dans certains cas, jQuery ou des bibliothèques AJAX plus avancées peuvent encore être utilisées.

Utilisation

Utilisation avec then()

fetch() renvoie une Promesse qui peut être traitée à l'aide de la méthode then() pour récupérer la réponse de la requête. Voici un exemple d'utilisation de fetch() avec then() :

fetch('https://api.thecatapi.com/v1/images/search?limit=10')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Une erreur s\'est produite : ', error));

Lorsque vous utilisez l'API Fetch en JavaScript pour faire des requêtes HTTP, la réponse (response) obtenue est un objet Response.

Cet objet contient plusieurs méthodes pour traiter le corps de la réponse de différentes manières, en fonction du type de données attendues. Voici les méthodes les plus couramment utilisées pour convertir le corps de la réponse :

  • response.json() : Cette méthode est utilisée pour convertir le corps de la réponse en un objet JavaScript. Elle est idéale pour traiter les réponses au format JSON.
  • response.text() : Si vous attendez une réponse sous forme de texte brut, cette méthode convertit le corps de la réponse en une chaîne de caractères (string).
  • […]

Utilisation avec une fonction Async

fetch() peut également être utilisée avec une fonction async pour faciliter la gestion des Promesses avec l'utilisation de await. Voici un exemple :

async function fetchCats() {
  try {
    const response = await fetch('https://api.thecatapi.com/v1/images/search?limit=10');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Une erreur s\'est produite : ', error);
  }
}

fetchCats();

Différence entre then et fonction async :

Les deux approches (then et async/await) permettent de gérer des Promesses, mais la principale différence est dans la syntaxe et la lisibilité du code. L'utilisation de then() implique une syntaxe en chaîne de fonctions, ce qui peut devenir complexe lorsqu'il y a plusieurs Promesses imbriquées. D'un autre côté, async/await rend le code plus lisible et ressemble davantage à une structure synchrone, facilitant ainsi la gestion des erreurs à l'aide des blocs try/catch.

En résumé, fetch() est une fonction JavaScript native pour effectuer des requêtes AJAX. Elle peut être utilisée avec then() pour gérer les Promesses de manière explicite ou avec async/await pour une syntaxe plus simple et lisible. Cela dépend de la préférence du développeur et des besoins spécifiques du projet.

La gestion des authentifications avec fetch, une API JavaScript pour les requêtes HTTP, implique souvent l'utilisation de headers HTTP pour transmettre des informations d'identification nécessaires. Voici comment cela fonctionne, ainsi qu'une explication des différents paramètres du header HTTP couramment utilisés.

Gestion des Authentifications avec Fetch

Pour gérer l'authentification, vous devez inclure des informations spécifiques dans le header de votre requête fetch. Ces informations peuvent être un token (comme un JWT - Json Web Token), un cookie, ou des identifiants de base (Basic Auth) encodés en Base64, selon le mécanisme d'authentification utilisé par l'API ou le serveur.

Exemple d'utilisation de Fetch avec un Token d'Authentification:

fetch('https://api.exemple.com/donnees', {
  method: 'GET', // ou 'POST', 'PUT', 'DELETE', etc.
  headers: {
    'Authorization': 'Bearer votre_token_d_authentification',
    'Content-Type': 'application/json'
  }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Erreur:', error));

Dans cet exemple, Bearer votre_token_d_authentification est utilisé pour l'authentification. Le préfixe Bearer est courant avec les tokens d'authentification, spécialement avec les JWTs.

Paramètres du Header HTTP

Les headers HTTP permettent au client et au serveur d'envoyer des informations supplémentaires avec une requête ou une réponse HTTP. Voici quelques paramètres de header HTTP couramment utilisés :

  • Authorization : Contient les informations d'authentification pour accéder à une ressource. Peut inclure des tokens, des credentials de base, etc.
  • Content-Type : Indique le type de média du corps de la requête ou de la réponse. Par exemple, application/json pour les données JSON.
  • Accept : Indique au serveur les types de média que le client est disposé à recevoir. Par exemple, application/json pour indiquer que le client souhaite recevoir du JSON.
  • Content-Length : La taille en octets du corps de la requête ou de la réponse.
  • User-Agent : Contient une chaîne caractéristique permettant d'identifier le type de client qui fait la requête au serveur.
  • Cookie : Utilisé pour envoyer des cookies du client au serveur.

Exemple de Header Couramment Utilisé avec Fetch

Voici un exemple simple de l'utilisation de fetch avec des headers pour une requête GET :

fetch('https://api.exemple.com/data', {
  method: 'GET',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
    'Authorization': 'Bearer votre_token_d_authentification'
  }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Erreur:', error));

Dans cet exemple, le header spécifie que le client accepte les réponses en JSON (Accept: application/json), envoie des données au format JSON (Content-Type: application/json), et s'authentifie auprès du serveur avec un token (Authorization: Bearer votre_token_d_authentification).

Autres exemples

Inclure un header et un footer dans une page html avec then()

Pour inclure une barre de navigation et un pied de page en tant que fichier HTML à l'aide de JavaScript, vous pouvez utiliser la fetchfonction pour récupérer le fichier HTML, puis l'insérer dans le DOM à l'aide de la innerHTMLpropriété ou de la insertAdjacentHTMLméthode.

Voici un exemple de la façon dont vous pouvez procéder :

// Fetch the navbar HTML file
fetch('navbar.html')
  .then(response => response.text())
  .then(html => {
    // Insert the navbar HTML into the DOM
    document.getElementById('navbar').innerHTML = html;
  });

// Fetch the footer HTML file
fetch('footer.html')
  .then(response => response.text())
  .then(html => {
    // Insert the footer HTML into the DOM
    document.getElementById('footer').innerHTML = html;
  });

Cela récupérera les fichiers navbar.htmlet footer.htmlet insèrera leur contenu dans les éléments avec respectivement idde navbaret footer.

Notez que cela ne fonctionnera que si les fichiers HTML sont situés sur le même serveur que la page qui fait la demande. Si les fichiers HTML se trouvent sur un autre serveur, vous devrez utiliser une solution côté serveur ou une bibliothèque tierce comme jQuery pour effectuer la demande.

Inclure un header et un footer dans une page html à l'aide d'une fonction Asynchrone

Pour inclure la barre de navigation et le pied de page en tant que fichier html avec la fonction asynchrone en javascript

Pour inclure une barre de navigation et un pied de page en tant que fichier HTML à l'aide d'une fonction asynchrone en JavaScript, vous pouvez utiliser la fetchfonction pour récupérer le fichier HTML, puis l'insérer dans le DOM à l'aide de la innerHTMLpropriété ou de la insertAdjacentHTMLméthode.

Voici un exemple de la façon dont vous pouvez le faire à l'aide d'une fonction asynchrone :

async function loadNavbar() {
  // Fetch the navbar HTML file
  const response = await fetch('navbar.html');
  const html = await response.text();

  // Insert the navbar HTML into the DOM
  document.getElementById('navbar').innerHTML = html;
}

async function loadFooter() {
  // Fetch the footer HTML file
  const response = await fetch('footer.html');
  const html = await response.text();

  // Insert the footer HTML into the DOM
  document.getElementById('footer').innerHTML = html;
}

// Call the async functions to load the navbar and footer
loadNavbar();
loadFooter();

Cela récupérera les fichiers navbar.htmlet footer.htmlet insèrera leur contenu dans les éléments avec respectivement idde navbaret footer.

Notez que cela ne fonctionnera que si les fichiers HTML sont situés sur le même serveur que la page qui fait la demande. Si les fichiers HTML se trouvent sur un autre serveur, vous devrez utiliser une solution côté serveur ou une bibliothèque tierce comme jQuery pour effectuer la demande.

Récuperer les données d'une table MySql en PHP et traiter les données en Javascript avec fetch

Voici une application simple qui utilise PHP et JavaScript pour récupérer des données depuis une base de données MySQL et les affiche en format JSON dans une page web.

Code PHP (api.php):

  1. Le code PHP se connecte à une base de données MySQL en utilisant les informations de connexion fournies ($host, $user, $password, $database).
  2. Une requête SQL (SELECT * FROM comments) est exécutée pour récupérer tous les commentaires de la table "comments".
  3. Les résultats de la requête sont extraits sous forme de tableau associatif en utilisant $statement->fetchAll(PDO::FETCH_ASSOC).
  4. Les commentaires sont ensuite convertis en format JSON à l'aide de json_encode().
  5. L'en-tête HTTP est configuré pour indiquer que le contenu est au format JSON (header('Content-Type: application/json')).
  6. Enfin, le contenu JSON est renvoyé au client (le navigateur) en tant que réponse.
<?php
$host = 'localhost';
$user = 'root';
$password = '';
$database = 'blog';

try {
    $pdo = new PDO("mysql:host=$host;dbname=$database", $user, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    $query = "SELECT * FROM comments";
    $statement = $pdo->query($query);
    $comments = $statement->fetchAll(PDO::FETCH_ASSOC);

    // Conversion en format JSON
    $jsonData = json_encode($comments);

    header('Content-Type: application/json');
    echo $jsonData;
} catch (PDOException $e) {
    die('Erreur de connexion à la base de données : ' . $e->getMessage());
}

Code HTML/JavaScript:

  1. Le code HTML contient une balise script qui exécute une requête fetch() vers l'URL http://localhost/blog-simplon/api.php. Cela récupère les données JSON générées par le code PHP.
  2. Le premier bloc .then analyse la réponse JSON de la requête et renvoie la promesse de données.
  3. Dans le deuxième bloc .then, les données JSON sont manipulées. Ici, le code simplement affiche les données dans la console à l'aide de console.log(data).
  4. Le bloc .catch gère toute erreur qui pourrait survenir lors de l'exécution de la requête fetch. Si une erreur se produit, elle est affichée dans la console à l'aide de console.error(error).
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        fetch('http://localhost/blog-simplon/api.php')
            .then(response => response.json())
            .then(data => {
                // Manipulation des données récupérées ici
                console.log(data);
            })
            .catch(error => {
                // Gestion des erreurs ici
                console.error(error);
            });
    </script>
</body>

En résumé, ce code récupère des commentaires depuis une base de données MySQL à l'aide de PHP, les convertit en JSON, puis utilise JavaScript pour récupérer ces données JSON via une requête fetch() et les afficher dans la console du navigateur.

www.alternative-rvb.com | Nicolas Malet | GITHUB | CODEPEN

Last changed by 
 
Alternative RVB
www.alternative-rvb.com www.github.com/alternative-rvb
0
287
Published on HackMD