axiosのinterceptorsでリクエストに共通のパラメータを付与する

axiosを利用してAPIリクエストを送る際に、全リクエストに同じパラメータを付与したいパターンがありました。
リクエストを送るタイミングで個別にパラメータを追加してもよかったのですが、不毛なのでinterceptorsを利用して処理を共通化しました。

interceptors の書き方

こんな感じで前処理を追加できます。

import axios from 'axios'

axios.interceptors.request.use(request => {
  console.log(request.url)
  return request
})

詳しくはGithubを参照してください。

共通パラメータを追加する

GET場合

import axios from 'axios'

axios.interceptors.request.use(request => {
  const hoge = { id: xxx, value: xxx }
  request.params = {
    ...request.params,
    hoge
  }
  return request
})

POSTの場合

import axios from 'axios'

axios.interceptors.request.use(request => {
  const hoge = { id: xxx, value: xxx }
  request.data = {
    ...JSON.parse(JSON.stringify(request.data)),
    hoge
  }
  return request
})

メソッドやURLで分岐させることもできる

import axios from 'axios'

axios.interceptors.request.use(request => {
  if(request.method === 'get') {
    ...
  }
  
  if(request.url === '/hoge') {
    ...
  }
  return request
})