Axiosの前処理でAPIレスポンスのスネークケースをキャメルケースに変換する

はじめに

サーバサイドからのAPIレスポンスがsome_idのようにスネークケースで定義されていると、JS側で毎回キャメルケースに変換することになりますよね。

{
  some_id: 1,
  some_name: "name",
}

今回はそんな変換処理をAxiosの共通処理でまとめてみました。

レスポンスをキャメルケースに変換する

import { camelCase, snakeCase } from 'change-case';

const isObject = (target: any): boolean => Object.prototype.toString.call(target).slice(8, -1)
  .toLowerCase() === 'object';

const convertSnakeToCamel = (target: any): void => {
  if (Array.isArray(target)) {
    target.forEach((t) => convertSnakeToCamel(t));
  }
  if (isObject(target)) {
    Object.keys(target).forEach((key) => {
      if (isObject(target[key]) || Array.isArray(target[key])) {
        convertSnakeToCamel(target[key]);
      }
      // スネークケースをキャメルケースに変換する
      if (key.includes('_')) {
        target[camelCase(key)] = target[key];
        delete target[key];
      }
    });
  }
};

キャメル変換する部分はchange-case というライブラリを入れましたが、そこまで複雑ではないので自作でもよさそう

参考：javascriptでキャメルケースとスネークケースの相互変換

Axiosに組み込む

import axios, { AxiosInstance } from 'axios';

const Axios: AxiosInstance = axios.create();

Axios.interceptors.request.use((request) => {
  // リクエストの共通処理
  return request;
});

Axios.interceptors.response.use((response) => {
  if (response.data) {
    convertSnakeToCamel(response.data);
  }

  return response;
});

export default Axios;

interceptorsを使うことでできました。interceptorsを使いこなせば、他にも、リクエストに共通のヘッダを毎回差し込んだり、レスポンスでエラー処理をしたりと、何かと便利にできそうです。