JavaScript · TypeScript · fronteira API

Axios snake_case ↔ camelCase

Centralize a conversão de nomes em uma fronteira HTTP em vez de renomear propriedades por todo o frontend.

Por Equipe editorial do Camel Case ConverterPublicado em 12 de set. de 2026Última revisão

Criar mapper recursivo seguro para JSON

function isPlainObject(value) {
  return Object.prototype.toString.call(value) === "[object Object]"
}
function toCamelKey(key) { return key.replace(/_+([a-zA-Z0-9])/g, (_, char) => char.toUpperCase()) }
function toSnakeKey(key) { return key.replace(/([a-z0-9])([A-Z])/g, "$1_$2").replace(/[-\s]+/g, "_").toLowerCase() }
function mapKeys(value, keyMapper) {
  if (Array.isArray(value)) return value.map((item) => mapKeys(item, keyMapper))
  if (!isPlainObject(value)) return value
  const output = {}
  for (const [key, child] of Object.entries(value)) {
    const nextKey = keyMapper(key)
    if (Object.hasOwn(output, nextKey)) throw new Error(`Key collision: ${nextKey}`)
    output[nextKey] = mapKeys(child, keyMapper)
  }
  return output
}

Transforme apenas objetos JSON simples e arrays, preserve escalares e valores não plain e detecte colisões.

Adicionar interceptors request/response a uma instância Axios dedicada

import axios from "axios"
const api = axios.create({ baseURL: "/api" })
api.interceptors.request.use((config) => {
  if (config.data && isPlainObject(config.data)) config.data = mapKeys(config.data, toSnakeKey)
  if (config.params && isPlainObject(config.params)) config.params = mapKeys(config.params, toSnakeKey)
  return config
})
api.interceptors.response.use((response) => {
  response.data = mapKeys(response.data, toCamelKey)
  return response
})

Normalize data/params para snake_case e response.data para camelCase.

Manter o código da aplicação em camelCase

const response = await api.post("/users", {
  displayName: "Ada Lovelace",
  profileSettings: { emailNotifications: true },
})
console.log(response.data.createdAt)

Um adapter centralizado permite que UI e modelos TypeScript usem uma única convenção interna.

Considerações de produção

  • Não transforme FormData, Blob, ArrayBuffer, streams ou instâncias de classe como JSON.
  • Use instância dedicada ou opt-out para endpoints que não devem ser transformados.
  • Não passe headers pelo mesmo mapper de chaves.
  • Tipos TypeScript não alteram chaves runtime; o interceptor precisa transformar os dados de verdade.

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.

Ferramentas e guias relacionados

JSON → camelCaseJSON → snake_caseChaves de objeto → camelCase em TypeScriptAPI Case ConverterFetch snake_case ↔ camelCaseTanStack Query snake_case ↔ camelCase