今回、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」で行えます。
// ライブラリを読み込む
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に変換するお話