fetchではなくaxiosを使用するのはIE対応のためだけではない

axiosを使用するのはIE対応のため?

ある日のこと、いつもは社内でJavaScriptでAPIのJSONを読み込むときはaxiosを使用していたのだが、Aさんがfetchを使いだした。

理由を聞いたところIEのサポートが終了したため、これからはfetchを使ったほうがaxiosを使わないので軽くなって良いだろうとのことだった。

たまに勘違いされているのだが、axiosを使うのはIE対応のためだけではないです。

fetchだとコードが長くなる

fetchだとjson()で変換しないとjsonで受け取れないのでコードが1行余分に必要になります。

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => console.log(json))

axiosの場合はjson()の変換が必要がないので少ないコードで直感的に書けます。

axios.get('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => console.log(response))

また、fetchだとレスポンスがHTTP 404や500であっても、拒否されずに処理されてしまいます。

fetch('https://jsonplaceholder.typicode.com/todos/foo')
  .then(response => response.json())
  .then(json => console.log(json)) // {} が返ってしまう
  .catch(console.error('error'))
  .finally(console.log('処理終了'))

そのためresponse.okで判定する処理が必要になります。

fetch('https://jsonplaceholder.typicode.com/todos/foo')
  .then(response => {
    if (response.ok) {
      console.log(response.json())
    } else {
      console.error('response error')
    }
  })
  .catch(console.error('catch error'))
  .finally(console.log('処理終了'))

axiosを使用した場合は以下のようにシンプルに書けます。

axios.get('https://jsonplaceholder.typicode.com/todos/foo')
  .then(response => console.log(response))
  .catch(console.error('error'))
  .finally(console.log('処理終了'))

axiosを使う理由はほかにもインスタンスが作成できるなどがありますが、以上の短くシンプルにコードが書けるという理由だけでもaxiosを使用する理由としては十分でしょう。

fetchを使って書くコードが多くなると記述ミスによるバグを誘発しやすいのでfetchは使わないことをオススメします。