API, JSON et fetch : le trio du web moderne¶

L'essentiel en 3 points

Une API (Application Programming Interface), c'est la porte d'entrée d'un service : on lui envoie une requête, elle répond avec des données, pas avec une page.
Le JSON, c'est la langue de ces données : des paires clé-valeur, que tous les langages savent lire.
fetch(), c'est le messager du navigateur : il va chercher ces données sans charger une nouvelle page. C'est ainsi que le web professionnel est construit aujourd'hui.

Le trio en un schéma¶

fetch() porte la demande, l'API y répond, et la réponse revient en JSON.

Deux façons de construire un site¶

Un site dynamique se construit de deux façons. Toute la différence : qui fabrique la page, le serveur ou le navigateur? Les deux existent aujourd'hui, souvent dans le même site.

Essayez¶

Cette page de musée est branchée sur la vraie API du Cleveland Museum of Art. Cliquez Page suivante en mode Site multipage, puis tapez quelques lettres et cliquez Charger plus en mode Application web. Comparez le panneau Ce qui voyage.

Site multipage (web classique)¶

Le serveur envoie la page (rendu côté serveur, SSR). À chaque clic, il interroge la base de données, fabrique le HTML et renvoie une page complète : l'adresse change, et tout l'écran est redessiné.

Application web (web moderne)¶

Le serveur envoie les données (rendu côté client, CSR). Il expose une API qui répond en JSON, et votre JavaScript les place dans la page avec fetch() : l'adresse ne change pas, et seule une zone se met à jour, sans charger une nouvelle page.

Les deux cohabitent

Un site multipage n'est pas dépassé : des millions de sites WordPress fabriquent encore leurs pages en PHP, et c'est souvent le bon choix. Le même WordPress peut aussi offrir une API. Dans les deux cas, la base de données est toujours là, derrière le serveur ou derrière l'API.

Vous le faites tous les jours¶

« Charger plus » et le défilement infini : TikTok, Reddit, Twitch. La suite s'ajoute en bas, et vous restez où vous êtes.
Les suggestions pendant la frappe : la recherche de jeux sur Steam, de chaînes sur Twitch.
La recherche de GIF dans Discord : les résultats s'affichent sans quitter la conversation.

Et le clavardage en direct de Discord ou de Twitch?

Il utilise une autre technique : les WebSockets. La connexion reste ouverte, et le serveur envoie chaque nouveau message dès qu'il arrive, sans attendre qu'on le demande.

Des API ouvertes, pour créer

Les collections de musées : le Cleveland Museum of Art (la source de la démo) et le Met (New York) , avec les images.
Les couleurs : The Color API donne le nom d'une couleur et ses harmonies.
Les mots : PoetryDB renvoie des poèmes classiques (en anglais).

Dans le monde professionnel¶

Une seule API pour tout : l'application iOS, l'application Android et le site d'une banque ou d'un réseau social reçoivent le même JSON.
Des services qu'on ne construit pas : le paiement, les cartes, l'envoi de courriels, la traduction. Un site les branche par API.
Les CMS « sans tête » (headless) : le contenu reste géré dans WordPress, et le site est construit avec n'importe quel outil frontend.
Les métiers : le développeur frontend (vous) consomme les API; le développeur backend les construit. Entre les deux, le contrat, c'est l'API et son JSON.

L'API : la porte d'un service¶

Une API permet à deux applications d'échanger des données, à l'aide de requêtes HTTP. Pensez à un restaurant :

le menu, c'est l'API : ce qu'on peut commander, et comment;
la cuisine, c'est le serveur web : on n'y entre jamais, et le plat arrive;
la personne qui prend la commande et rapporte l'assiette? C'est fetch(), le messager.

Requête HTTP	Elle sert à...	Exemple
`GET`	lire des données	les œuvres d'un musée
`POST`	envoyer des données	publier un commentaire
`PUT`	modifier des données	changer sa photo de profil
`DELETE`	supprimer des données	effacer un message

Dans ce cours, vous utilisez seulement GET, ce que fait fetch() par défaut.

Le JSON : la langue commune¶

Le JSON (JavaScript Object Notation) écrit les données en paires clé-valeur, avec la syntaxe des objets JavaScript. Né de JavaScript, il est lu par presque tous les langages : c'est la langue commune entre serveur et navigateur.

{
  "title": "Twilight in the Wilderness",
  "creation_date": "1860",
  "creators": ["Frederic Edwin Church"],
  "has_image": true
}

Avant le JSON : le XML

Les mêmes données, en XML. Chaque valeur est entourée de deux balises : plus long à écrire, plus long à transférer.

<artwork>
  <title>Twilight in the Wilderness</title>
  <creation_date>1860</creation_date>
</artwork>

Récap JS : le JSON

`fetch()` : le messager du navigateur¶

fetch() est native : rien à installer. Elle envoie la requête et attend la réponse de façon asynchrone, pendant que la page continue de fonctionner. Elle remplace l'ancienne technique AJAX (XMLHttpRequest), avec un code plus court.

const API_URL = "https://openaccess-api.clevelandart.org/api/artworks/";

async function loadArtworks() {
  const response = await fetch(API_URL + "?q=landscape&limit=6");
  const data = await response.json(); // le JSON devient un objet JS
  console.log(data.data[0].title);    // le titre de la 1re œuvre
}

Récap JS : async / await

Trouver une donnée dans un JSON complexe¶

La réponse d'une vraie API est rarement petite : des objets dans des tableaux dans des objets. Pour atteindre votre donnée, il faut écrire son chemin. La méthode, une démo pour tester vos chemins, et les outils de Firefox et de Chrome sont sur leur propre page.

Trouver une donnée dans un JSON

Dans vos projets¶

Vous utilisez déjà ce trio :

votre portfolio chargeait ses projets depuis un fichier JSON, avec fetch();
votre récit, à la phase 2, charge ses chapitres depuis data.json;
votre moment dataviz réunit les trois : une API externe, qui répond en JSON, appelée avec fetch() au bon moment, grâce à IntersectionObserver.

Choisir et tester votre API