Comment utiliser les API REST avec JavaScript (fetch)

Les API REST : comment les sites échangent des données

Une API REST permet à votre site de communiquer avec des services externes : récupérer la météo, afficher des actualités, envoyer des données à un serveur. L’outil JavaScript pour cela s’appelle fetch().

Comprendre une requête API

Requête GET simple avec fetch()

// Récupérer des données depuis une API publique
fetch('https://jsonplaceholder.typicode.com/posts')
    .then(response => response.json())  // Convertir en JSON
    .then(data => {
        console.log(data);  // Tableau d'articles
        console.log(data[0].title);  // Titre du premier article
    })
    .catch(error => {
        console.error('Erreur :', error);
    });

Avec async/await (syntaxe moderne recommandée)

async function chargerArticles() {
    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts');
        
        // Vérifier que la requête a réussi
        if (!response.ok) {
            throw new Error('Erreur HTTP : ' + response.status);
        }
        
        const articles = await response.json();
        
        // Afficher les articles dans la page
        const conteneur = document.getElementById('articles');
        articles.slice(0, 10).forEach(article => {
            conteneur.innerHTML += `
                <div class="article">
                    <h3>${article.title}</h3>
                    <p>${article.body}</p>
                </div>
            `;
        });
        
    } catch (erreur) {
        console.error('Impossible de charger les articles :', erreur);
        document.getElementById('articles').innerHTML = 
            '<p>Erreur de chargement. Vérifiez votre connexion.</p>';
    }
}

chargerArticles();

Requête POST : envoyer des données

async function creerArticle(titre, contenu) {
    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                title: titre,
                body: contenu,
                userId: 1
            })
        });
        
        const résultat = await response.json();
        console.log('Article créé :', résultat);
        return résultat;
        
    } catch (erreur) {
        console.error('Erreur lors de la création :', erreur);
    }
}

// Utilisation
creerArticle('Mon article', 'Le contenu de mon article');

Exemple concret : App Météo

<div id="meteo">
    <input type="text" id="ville" placeholder="Entrez une ville (ex: Dakar)">
    <button onclick="chercherMeteo()">Rechercher</button>
    <div id="résultat-meteo"></div>
</div>

<script>
async function chercherMeteo() {
    const ville = document.getElementById('ville').value;
    const clé = 'VOTRE_CLE_API'; // Inscrivez-vous sur openweathermap.org
    const url = `https://api.openweathermap.org/data/2.5/weather?q=${ville}&appid=${clé}&units=metric&lang=fr`;
    
    try {
        const response = await fetch(url);
        if (!response.ok) throw new Error('Ville non trouvée');
        
        const data = await response.json();
        
        document.getElementById('résultat-meteo').innerHTML = `
            <div class="meteo-card">
                <h2>${data.name}, ${data.sys.country}</h2>
                <p class="temp">${Math.round(data.main.temp)}°C</p>
                <p>${data.weather[0].description}</p>
                <p>Humidité : ${data.main.humidity}%</p>
                <p>Vent : ${data.wind.speed} km/h</p>
            </div>
        `;
    } catch (erreur) {
        document.getElementById('résultat-meteo').innerHTML = 
            '<p style="color:red;">❌ ' + erreur.message + '</p>';
    }
}
</script>

Gérer le chargement et les erreurs proprement

async function chargerDonnees(url) {
    const conteneur = document.getElementById('contenu');
    
    // 1. Afficher un loader
    conteneur.innerHTML = '<div class="loader">Chargement...</div>';
    
    try {
        const response = await fetch(url);
        
        if (!response.ok) {
            throw new Error(`Erreur ${response.status}: ${response.statusText}`);
        }
        
        const data = await response.json();
        
        // 2. Afficher les données
        conteneur.innerHTML = data.map(item => `
            <div class="item">
                <h3>${item.title}</h3>
                <p>${item.body}</p>
            </div>
        `).join('');
        
    } catch (erreur) {
        // 3. Afficher l'erreur
        conteneur.innerHTML = `
            <div class="erreur">
                <p>⚠️ Impossible de charger les données</p>
                <p>${erreur.message}</p>
                <button onclick="chargerDonnees('${url}')">Réessayer</button>
            </div>
        `;
    }
}

API publiques gratuites pour s’entraîner

Exercice pratique