【JavaScript】axiosのinterceptorsで動的に変わるパラメータをベースパラメータ的に扱う

　axiosはJavaScriptのHTTPクライアントライブラリです。
axios/axios： Promise based HTTP client for the browser and node.js
　axiosはwebページからAPIを叩く際によく使われます。またAPIには認証トークンを付与する時が多くあります。そういった時、リクエスト定義毎に認証トークンを付与する処理を記述するのは手間です。まとめて定義しましょう。
　認証トークンは手元にない時があります。そういった時は取得する処理を記述し、手元にある時は手元にある認証トークンを用いたくなります。こうなるとaxiosの基本設定にべた書きはできません。axiosが通信を行うごとに、認証トークンは今どうなっているか確認し適切な動作をする必要があります。これを実現するのがinterceptorsの仕組みでこれは次の様に書けます。
　axios/axios： Promise based HTTP client for the browser and node.js#interceptors

import axios, {AxiosInstance, AxiosRequestConfig} from 'axios';

const config = class BaseRepositoryConfig implements AxiosRequestConfig {
    public readonly baseURL?: string = process.env.MIX_BASE_APP_URL;
    public readonly timeout?: number = 30000; // ms
    public headers: { [index: string]: string } = {
      'Accept': 'application/json',
      'X-Requested-With': 'XMLHttpRequest',
      'X-CSRF-TOKEN': (document.head.querySelector('meta[name="csrf-token"]') as HTMLMetaElement).content,
    };
}

const ApiBaseRepository: AxiosInstance = axios.create(config);

// interceptorsは通信毎に処理を横取りします
// interceptors.requestならば送信前にリクエストを加工できます
ApiBaseRepository.interceptors.request.use((config: AxiosRequestConfig) => {
  // リクエストの度にgetApiToken関数からAPIトークンを取得、Authorizationヘッダに付与
  config.headers['Authorization'] = `Bearer ${getApiToken()}`
  
  return config;
});

export default ApiBaseRepository;

　こうすると通信の度にgetApiToken関数が走り、状況に応じて適切な動作で認証トークンを取得してリクエストに付与できます。