Fetch API - Récupérer des données

La Fetch API permet de récupérer des ressources sur un serveur via HTTP. Elle est principalement utilisée pour récupérer des fichiers texte, JSON ou interagir avec des API.

Charger un fichier texte

Le code suivant effectue une requête pour récupérer un fichier .txt, puis affiche son contenu dans la console.

fetch('data.txt') // Envoie une requête GET au serveur pour récupérer le fichier
.then(function(response) {
    return response.text(); // Convertit la réponse en texte
})
.then(function(text) {
    console.log(text); // Affiche le contenu du fichier dans la console
})
.catch(function(error) {
    console.error('Erreur:', error); // Gère les erreurs de connexion ou d'accès au fichier
});

Charger un fichier JSON

Les fichiers JSON sont couramment utilisés pour stocker des données structurées. Le code suivant récupère un fichier .json et le convertit en objet JavaScript.

fetch('data.json') // Envoie une requête GET pour récupérer un fichier JSON
.then(function(response) {
    return response.json(); // Convertit la réponse en objet JavaScript
})
.then(function(data) {
    console.log(data); // Affiche les données JSON dans la console
})
.catch(function(error) {
    console.error('Erreur:', error); // Gère les erreurs éventuelles
});

Explication du fonctionnement

1. fetch(url): Envoie une requête réseau pour récupérer la ressource spécifiée par l'URL.
2. .then(function(response) { return response.text(); }): Convertit la réponse en texte (ou .json() pour JSON).
3. .then(function(data) { console.log(data); }): Traite les données et les affiche.
4. .catch(function(error) { console.error('Erreur:', error); }): Capture et affiche les erreurs éventuelles (problèmes réseau, fichier introuvable, etc.).

Gérer les erreurs plus précisément

Il est recommandé de vérifier le statut de la réponse avant d’essayer de la traiter :

fetch('data.json')
.then(function(response) {
    if (!response.ok) {
        throw new Error('Erreur HTTP: ' + response.status); // Lève une erreur si la réponse n'est pas correcte
    }
    return response.json();
})
.then(function(data) {
    console.log(data);
})
.catch(function(error) {
    console.error('Une erreur est survenue:', error);
});