1. L’API native Fetch

L’API Fetch est l’interface standard moderne intégrée à tous les navigateurs pour réaliser des requêtes HTTP (remplaçant définitivement l’ancien objet complexe XMLHttpRequest).

2. Réalisation d’une requête GET pour afficher une liste de cours

async function chargerFormationsDisponibles() {
    const url = "https://api.ecole-informatique.ch/v1/courses";
    try {
        const reponse = await fetch(url);
        if (!reponse.ok) {
            throw new Error(`Serveur injoignable : code ${reponse.status}`);
        }
        const formations = await reponse.json();
        afficherCatalogue(formations);
    } catch (err) {
        afficherErreurUtilisateur("Impossible de charger les formations pour le moment.");
    }
}

3. Envoi de données avec une requête POST (JSON)

Pour soumettre des données structurées à une API, précisez la méthode, les en-têtes d’encodage (Content-Type: application/json) et sérialisez votre objet JavaScript avec JSON.stringify() :

async function envoyerCandidature(donneesCandidat) {
    const reponse = await fetch("https://api.ecole-informatique.ch/v1/inscriptions", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "Accept": "application/json"
        },
        body: JSON.stringify(donneesCandidat)
    });
    return await reponse.json();
}

Synthèse pédagogique : Attention : l’API Fetch ne rejette pas sa promesse lors d’un code d’erreur HTTP 404 ou 500 ; vérifiez toujours impérativement le booléen reponse.ok !

PreviousNext