Apprends JSON & Fetch API

Les bases de JSON

JSON (JavaScript Object Notation) est un format texte léger pour l'échange de données. C'est le format le plus courant pour envoyer et recevoir des données depuis des API web.

Conversion entre JS et JSON :

javascript

// Objet JavaScript vers chaîne JSON
const user = { name: 'Alice', age: 30 };
const jsonString = JSON.stringify(user);
console.log(jsonString); // '{"name":"Alice","age":30}'

// Chaîne JSON vers objet JavaScript
const parsed = JSON.parse(jsonString);
console.log(parsed.name); // 'Alice'

Affichage formaté du JSON avec indentation :

javascript

JSON.stringify(user, null, 2);
// {
//   "name": "Alice",
//   "age": 30
// }

Différences clés avec les objets JavaScript :

Les clés doivent être des chaînes entre guillemets doubles ("name", pas name)
Aucune fonction autorisée
Pas de undefined (utilise null à la place)
Pas de commentaires
Pas de virgules finales

json

{
  "name": "Alice",
  "scores": [95, 87, 92],
  "active": true,
  "address": null
}

L'API Fetch

L'API Fetch fournit une manière moderne de faire des requêtes HTTP depuis JavaScript. Elle remplace l'ancien XMLHttpRequest.

javascript

// Requête GET basique
const response = await fetch('https://api.example.com/users');
const data = await response.json();
console.log(data);

Points clés sur fetch :

fetch(url) retourne une Promise qui se résout en un objet Response
Tu dois await deux fois : une fois pour le fetch lui-même, une fois pour parser le corps
L'objet Response a des propriétés utiles :
- response.ok — true si le statut est 200-299
- response.status — le code de statut HTTP (200, 404, 500, etc.)
- response.headers — les en-têtes de réponse

Parser le corps de la réponse :

javascript

// Parser en JSON
const json = await response.json();

// Parser en texte brut
const text = await response.text();

// Parser en binaire (Blob)
const blob = await response.blob();

Important : Chaque méthode de parsing du corps (json(), text(), etc.) ne peut être appelée qu'une seule fois par réponse. Le flux du corps est consommé après le premier appel.

Effectuer des requêtes

Par défaut, fetch() effectue une requête GET. Tu peux faire d'autres types de requêtes en passant un objet d'options.

Requête POST (envoi de données) :

javascript

const response = await fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    name: 'Alice',
    email: 'alice@example.com',
  }),
});

const newUser = await response.json();

Autres méthodes HTTP :

javascript

// PUT — remplace la ressource entière
await fetch('/api/users/1', {
  method: 'PUT',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Alice', age: 31 }),
});

// PATCH — mise à jour partielle
await fetch('/api/users/1', {
  method: 'PATCH',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ age: 31 }),
});

// DELETE
await fetch('/api/users/1', { method: 'DELETE' });

En-têtes personnalisés :

javascript

const response = await fetch('/api/data', {
  headers: {
    'Authorization': 'Bearer my-token',
    'Accept': 'application/json',
  },
});

Gestion des erreurs avec Fetch

Une erreur courante est de supposer que fetch() lance une erreur sur les erreurs HTTP. Ce n'est pas le cas.

fetch() ne rejette la Promise qu'en cas d'échecs réseau (pas d'internet, erreur DNS, etc.). Une réponse 404 ou 500 est toujours un fetch réussi — tu dois vérifier manuellement.

javascript

try {
  const response = await fetch('/api/data');

  // Vérifie si le statut HTTP indique un succès
  if (!response.ok) {
    throw new Error(`Erreur HTTP ! Statut : ${response.status}`);
  }

  const data = await response.json();
  console.log(data);
} catch (error) {
  // Attrape à la fois les erreurs réseau ET notre erreur lancée
  console.error('Échec de la requête :', error.message);
}

Créer un wrapper réutilisable :

javascript

async function fetchJSON(url, options = {}) {
  const response = await fetch(url, {
    headers: { 'Content-Type': 'application/json' },
    ...options,
  });

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
  }

  return response.json();
}

// Utilisation
try {
  const users = await fetchJSON('/api/users');
  console.log(users);
} catch (err) {
  console.error(err.message);
}

Ce pattern garantit que tu gères à la fois les erreurs réseau et les réponses d'erreur HTTP en un seul endroit.

JSON & Fetch en pratique

html

<div id="output"></div>

<script>
  // JSON.stringify and JSON.parse
  const product = {
    name: 'Laptop',
    price: 999.99,
    specs: { ram: '16GB', storage: '512GB' }
  };

  // Convert to JSON string
  const json = JSON.stringify(product, null, 2);

  // Parse back to object
  const parsed = JSON.parse(json);

  // Simulate a fetch-like flow with JSON data
  const mockApiResponse = JSON.stringify({
    status: 'success',
    data: { users: ['Alice', 'Bob', 'Charlie'] }
  });

  const apiData = JSON.parse(mockApiResponse);

  const output = document.getElementById('output');
  output.innerHTML = `
    <p><strong>Original:</strong> ${product.name} - $${product.price}</p>
    <p><strong>JSON:</strong></p>
    <pre>${json}</pre>
    <p><strong>Parsed specs:</strong> ${parsed.specs.ram}, ${parsed.specs.storage}</p>
    <p><strong>API users:</strong> ${apiData.data.users.join(', ')}</p>
  `;
</script>

Que retourne response.json() ?

JSON & Fetch API

Les bases de JSON

L'API Fetch

Effectuer des requêtes

Gestion des erreurs avec Fetch

JSON & Fetch en pratique

Prêt à pratiquer ?