意外と知られていないJavaScriptライブラリaxiosの7つの設定方法

axiosとは

axiosとはHTTP通信を超簡単に行うことができるJavaScriptライブラリ。

最近は当たり前のように使用されてきているが、単純なgetやpostのみ使用されて設定方法については意外と知られていないことが多い。

この記事ではaxiosを使用するなら最低限覚えておいたほうが良い7つの設定方法を記載した。

設定1 baseURL

axiosはbaseURLを設定しておけばgetやpostのURLを短く記述できる。

axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com'

axios.get('/todos/1')
  .then(res => console.log(res.data))

axios.get('/todos/2')
  .then(res => console.log(res.data))

設定2 timeout

axiosではタイムアウトの時間がデフォルトだとないため、例えば5秒以内に応答しなければ処理を中断したい場合は以下のようになる。

axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com'

axios.get('/todos/1', {timeout: 5000})
  .then(res => console.log(res.data))

axiosの設定が多い場合はオブジェクト形式のほうが見やすい。

axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com'

axios({
  method: 'get',
  url: '/todos/1',
  timeout: 5000
})
  .then(res => console.log(res.data))

設定3 params

axiosではURLにパラメーターがある場合、urlではなくparamsに追加したほうがコードの可読性が良くなる。

axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com'

axios({
  method: 'get',
  url: '/todos/1',
  params: {
    foo: 1,
    bar: 2
  }
})
  .then(res => console.log(res.data))

設定4 validateStatus

axiosのデフォルト設定ではステータスコードが200番台以外だとエラーになる。

そのため、200番台だけでなく300番台もエラーにならないようにするにはvalidateStatusの設定が必要になる。

axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com'

axios({
  method: 'get',
  url: '/todos/1',
  validateStatus(status) {
    return status >= 200 && status < 400
  },
})
  .then(res => console.log(res.data))

設定5 auth (Basic認証)

authでBasic認証のユーザー名とパスワードの指定が可能。

開発環境で作業している場合はこの設定が必要なことも少なくない。

axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com'

axios({
  method: 'get',
  url: '/todos/1',
  auth: {
    username: 'sato',
    password: 'pass'
  }
})
  .then(res => console.log(res.data))

設定6 headers

レスポンスヘッダーを指定。通常は指定不要だがないと読み書きできないこともある。

axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com'

axios({
  method: 'get',
  url: '/todos/1',
  headers: {'X-Custom-Header': 'foobar'}
})
  .then(res => console.log(res.data))

設定7 proxy

プロキシを設定する。プロキシを使用している場合は必須の設定。

axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com'

axios({
  method: 'get',
  url: '/todos/1',
  proxy: {
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  }
})
  .then(res => console.log(res.data))