浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【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],
  })

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

  • この記事いいね! (0)