Fetch APIとAxiosの違い

以前にJavaScript Fetch APIの利用方法について紹介させていただきました。

Fetch APIの利用方法について知りたい方はまずは下記の関連記事をご覧ください。

この記事では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は外部ライブラリです。

そのため、Axiosを使用するには追加の依存性をプロジェクトに追加する必要があります。

JavaScript

npm install axios

import axios from 'axios'

必要最小限の依存性を持つことを好む場合は、Fetchが適しています

以上、Fetch APIとAxiosの違いでした。

こちらのリソースがあなたのプロジェクトで参考になれば幸いです。