Fetch · fronteira de API JSON
Fetch API snake_case ↔ camelCase
Envolva chamadas Fetch JSON para manter camelCase na aplicação e snake_case no formato de rede.
Converta a requisição JSON antes da serialização
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>
}Converta o objeto da aplicação para snake_case antes de chamar JSON.stringify.
Converta a resposta analisada antes de retorná-la
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
}Depois de response.json(), converta recursivamente as chaves para camelCase.
Considerações de produção
- Use somente em endpoints JSON; não transforme FormData, Blob, ArrayBuffer, streams ou upload de arquivos.
- Converta após response.json(), não o texto bruto, para não alterar valores string.
- Mantenha detecção de colisão quando duas chaves puderem normalizar para a mesma saída.
- Centralize o wrapper em um módulo comum de cliente API.
Testar a fronteira JSON online
Teste objetos aninhados, arrays, exclusões, stop paths, prefixos, colisões e diff de chaves antes de implementar.
Solte um arquivo .json ou escolha no dispositivo
Arquivos são lidos apenas no navegador. Tamanho máximo: 5 MB.
JSON convertido
{
"userProfile": {
"firstName": "Ada",
"createdAt": "2026-09-12"
}
}Parsing, leitura de arquivo, formatação e conversão rodam localmente no navegador. O JSON não é enviado a um servidor de conversão.