API fetch

C'est la méthode moderne, qui repose sur des promesses,
pour faire une requête HTTP vers un serveur web.
Préférée par sa simplicité par les développeurs qui ne comprennent pas la syntaxe AJAX.

Fetch simple

const res = await fetch(url);
const data = await res.json();
console.table(data)

Javascript effectue une requête HTTP avec la méthode GET pour obtenir le fichier url, transformer le string reçu en objet json, et l'afficher dans la console.
On peut nommer comme on veut les variables url, res et data.

Notation avec point

fetch('https://api.example.com/data')
  .then(response => response.json()) // Analyse automatique du JSON
  .then(data => console.log(data));  // L'objet JavaScript est disponible ici

S'il faut exécuter plusieurs instructions, les mettre mettre accolades:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
	console.log(data)
	faireCeciCela()
  });

La notation utilisant le point (.) pour accéder aux propriétés d'un objet retourné par fetch, comme response.ok ou response.status, s'appelle la notation avec un point (ou dot notation).
Cette syntaxe est la méthode standard et préférée en JavaScript pour accéder aux membres d'un objet lorsqu'on connaît le nom littéral de la propriété, offrant une syntaxe concise et facile à lire par rapport à la notation entre crochets.

La méthode .then() en JavaScript est utilisée avec les promesses pour gérer les opérations asynchrones.
Elle accepte jusqu'à deux fonctions de rappel : la première pour traiter la résolution (succès) de la promesse et la seconde pour gérer le rejet (erreur).

Chaînage : .then() retourne une nouvelle promesse, permettant d'enchaîner plusieurs opérations asynchrones de manière séquentielle et lisible.
Exécution asynchrone : Les fonctions passées à .then() s'exécutent toujours de manière asynchrone, même si la promesse est déjà résolue.
Alternative : Pour une gestion spécifique des erreurs, il est souvent préférable d'utiliser la méthode .catch() à la fin de la chaîne.

fetch('https://api.example.com/data')
  .then(response => response.json()) // Analyse automatique du JSON
  .then(data => console.log(data));  // L'objet JavaScript est disponible ici
  .catch(err => { 
     // handle errors 
  });

Objet Response

Lors d'une demande HTTP, response.json() transforme le flux de texte brut en un objet JS utilisable :
Fetch retourne un objet Response qui expose plusieurs méthodes asynchrones pour extraire les données selon leur format natif.
.json() : Renvoie un objet JSON (après parsing du string reçu)
.text() : Renvoie la réponse sous forme de chaîne de caractères brute. Utile pour le HTML, le XML ou le texte simple.
.blob() : Renvoie la réponse sous forme d'objet Blob (données binaires avec un type MIME). Idéal pour les images, les vidéos ou les fichiers téléchargeables.
.arrayBuffer() : Renvoie la réponse sous forme de tableau de bits brut. Recommandé pour le traitement binaire de bas niveau.
.formData() : Renvoie la réponse sous forme d'objet FormData. Pratique pour les réponses encodées en multipart/form-data.

Dans une fonction asynchrone

await suspend l'exécution de la fonction jusqu'à ce qu'une promesse soit résolue ou rejetée.
Le code s'exécute de manière synchrone jusqu'à la première instruction await, moment où le contrôle est rendu au moteur JavaScript pour permettre d'autres tâches, avant de reprendre l'exécution une fois la promesse accomplie.

async function getJSON(an) {
	console.log(`GET ${an}.json`);
	const response = await fetch(`${an}.json`);
 	var json = await response.json();
}

// télécharge un fichier en GET
getJSON('2026.json')

L'utilisation de async et await simplifie la gestion des erreurs grâce aux blocs try/catch standards et évite l'enchaînement complexe de .then().
Le code s'exécute de manière synchrone jusqu'à la première instruction await, moment où le contrôle est rendu au moteur JavaScript pour permettre d'autres tâches, avant de reprendre l'exécution une fois la promesse accomplie.

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error("Erreur :", error);
  }
}

Fetch avec objet Request

La méthode json() est disponible sur les interfaces Response et Request dans l'API Web pour lire et analyser automatiquement le corps d'une requête ou d'une réponse au format JSON.
Elle retourne une Promesse qui se résout avec l'objet JavaScript résultant du parsing, éliminant le besoin d'appeler manuellement JSON.parse().

La méthode json() permet également de lire le corps d'un objet Request existant, utile pour inspecter ou réutiliser des données JSON avant de les envoyer ou les modifier :

const obj = { hello: "world" };
const request = new Request("/myEndpoint", {
  method: "POST",
  body: JSON.stringify(obj)
});

request.json().then(data => {
  // data contient maintenant l'objet { hello: "world" }
});

// Create request object 
var request = new Request('https://example.com/api/...', 
 {
    method: 'POST', 
    body: {'name': 'Klaus'}, 
    headers: new Headers({ 'Content-Type': 'application/json' }) 
 });

// Now use it! 
fetch(request) 
   .then(resp => { 
         // handle response 
   }) 
   .catch(err => { 
         // handle errors 
    });