【JavaScript】axios で通信直前に値を更新する

　axios は JavaScript の HTTP クライアントライブラリです。
axios/axios： Promise based HTTP client for the browser and node.js
　axios には interceptors という仕組みがあり、これを使うことでリクエスト時に設定を加工できます。これは便利な仕組みなのですがデータの変換はまた別にあります。これは transformRequest という設定でできます。
axios/axios： Promise based HTTP client for the browser and node.js

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    return response;
  }, function (error) {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    return Promise.reject(error);
  });

　transformRequest は例えば次の様に使えます。

// 日本語の年月日をプログラム中で扱いやすい形に変換
const formatFormData = (data: FormData) => {
  const localeDate = new RegExp('\\d{4}年\\d{2}月\\d{2}日');
  data.forEach((v, n) => {
    if (typeof v === 'string' && localeDate.test(v)) {
      data.set(n, v.replace(/(\d{4})年(\d{2})月(\d{2})日/, '$1-$2-$3'));
    }
  });
  return data;
};
// config の transformRequest
axiosInstance.post(`/sign-up/`, formData, {
    transformRequest: [formatFormData],
  })

　こんな感じで、リクエストにわたされたパラメータを変換できます。変換方式が共通の場合、これを使うとコードをわかりやすいまま減らせて便利です。変換方式が共通になるのは例えばリクエストの投げ先の都合による変換です。
　例で配列とした様に変換用の関数は複数入れられます。日本語の年月日のみならずもっと多様な変換をチェーンしていくことも可能です。