Vue.js+axiosでAPIを叩く時のパラメータをCamelCase・snake_caseに変換してみた

今回、vue.jsでaxiosを使ってAPIを叩く際に、GET・POSTのリクエストパラメータやPOSTのレスポンスパラメータのkey名を自動でキャメル・スネークケースに変換するコードを実装しました。

実現したいこと

POST/GETのリクエストパラメータ

 
変換前
{
  "userId" : 1,
  "accountDate : "2020-08-01"
}

変換後
{
  "user_id" : 1,
  "account_date : "2020-08-01"
}

POSTのレスポンスパラメータ

変換前
{
  "user_id" : 1,
  "account_date : "2020-08-01"
}

変更後
{
  "userId" : 1,
  "accountDate : "2020-08-01"
}

【実行環境】
vue.js 2.5.17
axios 0.19
laravel 7.0
laravel/passport 9.3

事前準備

まず、今回はライブラリのlodashを利用します。
laravelプロジェクト内で「npm install」を実行すれば自動的にインストールされていると思いますが、もし入ってない場合は

npm install lodash

でライブラリをインストールする必要がります。

axiosの設定を変更する

今回はlaravelプロジェクト内でvue.jsを利用しています。
laravelプロジェクト内でaxiosの設定は「resources/bootstrap.js」で行えます。

resorces/bootstrap.js

// ライブラリを読み込む
window._ = require('lodash');

// 初期設定
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

// 下記コードを追記
const mapKeysDeep = (data, callback) => {
    if (_.isArray(data)) {
        return data.map(innerData => mapKeysDeep(innerData, callback));
    } else if (_.isObject(data)) {
        return _.mapValues(_.mapKeys(data, callback), val =>
            mapKeysDeep(val, callback)
        );
    } else {
        return data;
    }
};

const mapKeysCamelCase = data =>
    mapKeysDeep(data, (_value, key) => _.camelCase(key));

const mapKeysSnakeCase = data =>
    mapKeysDeep(data, (_value, key) => _.snakeCase(key));

axios.interceptors.response.use(
    response => {
        const { data } = response;
        const convertedData = mapKeysCamelCase(data);
        return { ...response, data: convertedData };
    },
    error => {
        console.log(error);
        return Promise.reject(error);
    }
);

axios.interceptors.request.use(
    request => {
        // GETでパラメータを送る時
        if(!_.isEmpty(request.params)){
            const convertedData = mapKeysSnakeCase(request);
            const convertedParams = mapKeysSnakeCase(request.params);
            return { ...request, data: convertedData, params: convertedParams }

        // POST送信時        
        }else{
            const { data } = request;
            const convertedData = mapKeysSnakeCase(data);
            return { ...request, data: convertedData };
        }
    },
    error => {
        console.log(error);
        return Promise.reject(error);
    }
);

interceptors.response.useとinterceptors.request.useで、それぞれaxiosを実行する前、後に行う処理を追加しています。

実際にkey名を変換しているのは、.camelCase(key)と.snakeCase(key)です。
mapKeysDeepで、再帰的にkeyを取得しているので、key・valueの階層が深くても、全てのkeyを取得・変換できます。

・今回のコードを書く上で参考にしたサイト

axiosライブラリを使ってリクエストする
axiosのinterceptorsで、リクエストの前処理を共通して行う
AxiosでAPIレスポンスをcamelCaseに変換するお話