Fetch · frontière API JSON
Fetch API snake_case ↔ camelCase
Encapsulez les appels Fetch JSON afin de garder camelCase dans l’application et snake_case sur le réseau.
Convertir la requête JSON avant sérialisation
import { keysToSnake } from "./api-case"
export async function postJson<T>(url: string, body: unknown): Promise<T> {
const response = await fetch(url, {
method: "POST",
headers: { "content-type": "application/json" },
body: JSON.stringify(keysToSnake(body)),
})
if (!response.ok) {
throw new Error(`API request failed: ${response.status}`)
}
return response.json() as Promise<T>
}Transformez l’objet applicatif en snake_case avant JSON.stringify.
Convertir la réponse analysée avant de la retourner
import { keysToCamel } from "./api-case"
export async function getJson<T>(url: string): Promise<T> {
const response = await fetch(url)
if (!response.ok) {
throw new Error(`API request failed: ${response.status}`)
}
const wireData: unknown = await response.json()
return keysToCamel(wireData) as T
}Après response.json(), mappez récursivement les clés vers camelCase.
Points d’attention en production
- Utilisez ce wrapper uniquement pour les endpoints JSON ; ne transformez pas FormData, Blob, ArrayBuffer, streams ou fichiers.
- Mappez après response.json(), pas le texte brut, afin de ne jamais modifier les valeurs chaîne.
- Gardez la détection de collisions lorsque deux clés peuvent se normaliser vers la même sortie.
- Centralisez le wrapper dans un module client API commun.
Tester la frontière JSON en ligne
Testez objets imbriqués, tableaux, exclusions, stop paths, préfixes, collisions et diff de clés avant l’implémentation.
Déposez un fichier .json ou choisissez-en un sur votre appareil
Les fichiers sont lus uniquement dans votre navigateur. Taille maximale : 5 Mo.
JSON converti
{
"userProfile": {
"firstName": "Ada",
"createdAt": "2026-09-12"
}
}Analyse, lecture de fichier, formatage et conversion s’exécutent localement dans votre navigateur. Le JSON n’est pas envoyé à un serveur de conversion.