Axios vs fetch: どちらのHTTPクライアントを選ぶか
Axiosはinterceptorと自動JSONを備えた機能豊富なHTTPライブラリ、fetchはネイティブで依存関係ゼロのブラウザおよびNodeのプリミティブです。
Axiosはfetchが標準では持たない利便性を提供します。自動JSONパース、request/responseのinterceptor、タイムアウト、アップロード進捗、そして2xx以外のレスポンスでの一貫したエラー処理を、依存関係を追加する代わりに得られます。fetchはモダンブラウザとNodeに組み込まれており、インストールのフットプリントがなく、streamingをサポートしますが、JSONの手動処理が必要で、HTTPエラーではrejectしません。Axiosは利便性と機能で優れ、fetchは依存関係ゼロとプラットフォームネイティブ性で優れます。
| Axios | fetch | |
|---|---|---|
| 依存関係 | 外部ライブラリ | ネイティブ(インストール不要) |
| JSON | 自動 | 手動 (.json()) |
| Interceptor | 組み込み | 手動のwrapper |
| 4xx/5xxでのエラー | reject する | resolve する(okを確認) |
| 最適な用途 | 利便性、interceptor | 依存関係ゼロ、ネイティブ |
ユースケースと機能
Axiosは、wrapperを書かずにinterceptor、自動JSON、タイムアウト、統一されたエラー処理が欲しいアプリに適しています。fetchは、依存関係とバンドルサイズを最小化したい、あるいはプラットフォームネイティブなstreamingが欲しいチームで、JSONとエラー処理のための薄いヘルパーを追加してもよい場合に適しています。
テストとCI
どちらもMSWやnockできれいにmockでき、fetchは今やNodeのテスト環境でネイティブです。いずれもmanaged runnerで動作し、高速なrunnerはHTTPをmockした統合テストスイートを短縮します。
結論
interceptor、自動JSON、統一されたエラー処理が欲しいなら: Axios。依存関係ゼロとプラットフォームネイティブなfetchが欲しいなら: ネイティブAPI(必要なら薄いwrapperと併用)。Axiosは依存関係と引き換えに利便性を、fetchは利便性と引き換えにネイティブ性を得ます。