Know Easy 
以前にJavaScript Fetch APIの利用方法について紹介させていただきました。
Fetch APIの利用方法について知りたい方はまずは下記の関連記事をご覧ください。
JavaScriptのfetch()の使い方
この記事ではFetch APIとAxiosの違いについて簡単に解説していきます。
前提条件
この記事はFetch API、Axiosのどちらかが優れている、どちらかを推奨する記事ではありません。
Fetch APIとAxiosのどちらを使用するべきかは具体的な状況やプロジェクトの要件によりますのでその点はご了承ください。
Fetch APIとaxiosの違いについて
①ブラウザ互換性
Fetch APIはモダンなブラウザで広くサポートされていますが、古いブラウザ（特にIE）ではpolyfillが必要です。
※IE = Internet Explorer
古いブラウザでの互換性が重要な場合、Axiosが簡単な選択となります。
IEがClient要件に入っているシステムはAxiosを利用する方が好ましいでしょう。
②エラーハンドリング
Fetch APIとAxiosではエラーハンドリングが異なります。
AxiosはHTTPステータスコードが200番台以外の場合にPromiseをrejectするのでエラーハンドリングが直感的です。
Fetchはネットワークエラー以外でPromiseをrejectしないため、エラーハンドリングを自分で設計する必要があります。
エラーハンドリングをより細かく制御したい場合はFetch、シンプルで直感的なエラーハンドリングが好ましい場合はAxiosが良いでしょう。
③Axiosに合ってFetch APIにない機能
AxiosはFetch APIにはないいくつかの追加の機能を提供しています。
- リクエストとレスポンスの自動変換
- リクエストのタイムアウトの設定
- 進行状況のモニタリング
これらの機能を利用したい場合にはAxiosが適することになります。
④依存性
Fetch APIはブラウザに組み込まれていますが、Axiosは外部ライブラリです。
そのため、Axiosを使用するには追加の依存性をプロジェクトに追加する必要があります。
npm install axios
import axios from 'axios'必要最小限の依存性を持つことを好む場合は、Fetchが適しています
まとめ
以上、Fetch APIとAxiosの違いでした。
こちらのリソースがあなたのプロジェクトで参考になれば幸いです。
