axiosでの通信時にキャメルケース化・スネークケース化の処理を混ぜる

はじめに

こんばんは。

axiosでフロントからバックエンドと通信する際にパラメータを渡すと思います。

その際に、パラメータのkey名ってスネークケースで渡して、スネークケースで受け取りたいときってあると思います。

また、その後バックエンドからフロントエンドにパラメータを返す際に、フロントエンドではキャメルケースで扱いたい時があると思います。

そんなときに、アプリケーション側ではあんまり気にせず、対応する方法を備忘録で残しておきます。

本題

今回は humps を使います。

github.com

この humpsを使ってフロントから渡す際はスネークケース化, バックエンドから返ってくる際はキャメルケース化してみます。

import axios from 'axios'

// リクエストのデータの各Keyをスネークケース化
axios.interceptors.request.use((req) => {
  req.data = humps.decamelizeKeys(req.data)
  return req
})

// レスポンスのデータの各Keyをキャメルケース化
axios.interceptors.response.use((res) => {
  res.data = humps.camelizeKeys(res.data)
  return res
})

この処理を設定しておくことで、ロジックは基本的にキャメルケースで統一でき、パラメータを渡す際だけでKeyはスネークケースで統一できます。

終わりに

そもそも全部キャメルケースにしとけばこんなことしないでもいいんですが、機械的にしとけば人的ミスも減りますよね。

現場からは以上です。