Axios と Fetch の違いは？特徴と使い分けを詳しく紹介

この記事では Web API との通信を行う際によく使われる axios と fetch の違いについてご紹介します！

初心者から中級者のプログラマー向けに、各章で具体的なコード例を交えながらわかりやすく解説していきます。

結論

まず最初に、この記事の最初に結論をお話します。

axios は 機能豊富で便利なライブラリ ですが、追加でインストールする必要 があります。
逆に fetch は ブラウザに組み込まれている ため、シンプルなAPI呼び出しに適していますが エラーハンドリングなどが少し面倒 です。

どちらを使うかは、プロジェクトの要件や好みによって選んでいきましょう！

それでは、それぞれの特徴と違いについてみていきましょう。

Axios の説明と特徴

それでは、まず axios について詳しく解説していきます。

GitHub - axios/axios: Promise based HTTP client for the browser and node.js

Promise based HTTP client for the browser and node.js - axios/axios

github.com

自動で JSON データを変換

axios は 自動で JSON データを変換 してくれるため、APIから受け取ったレスポンスをすぐに使えます。

axios.get("https://api.example.com/data")
  .then(response => {
    console.log(response.data); // 既に JSON 形式に変換されている
  });

リクエストとレスポンスのインターセプター

インターセプターとは通信を行う際にリクエストやレスポンスの前後で実行されるカスタムロジックを定義するための機能です。

例えば、認証情報の追加、エラーハンドリング、ログ出力などがインターセプターで実現できます。

axios では、リクエストやレスポンスを送信・受信する前にカスタムロジックを実行 できます。
これにより、認証トークンの追加やエラーロギングなどの 共通の処理を一元管理 できます。

// リクエストインターセプター
axios.interceptors.request.use(config => {
  config.headers.Authorization = "Bearer " + localStorage.getItem("token");
  return config;
}, error => {
  return Promise.reject(error);
});

// レスポンスインターセプター
axios.interceptors.response.use(response => {
  return response;
}, error => {
  console.error("Error occurred:", error);
  return Promise.reject(error);
});

リクエストのキャンセル

他にも axios では CancelToken を使ってリクエストをキャンセルできます。
これによって 不要なリクエストの結果を無視 できます。

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get("https://api.example.com/data", { cancelToken: source.token })
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log("Request canceled:", error.message);
    } else {
      console.error("Error:", error);
    }
  });

source.cancel("Operation canceled by the user.");

Fetch の説明と特徴

次は fetch について詳しく解説していきます。

fetch() グローバル関数 - Web API | MDN

fetch() はグローバルのメソッドで、ネットワークからリソースを取得するプロセスを開始し、レスポンスが利用できるようになったら履行されるプロミスを返します。

mozilla.org

ブラウザに組み込まれている

まず、fetch はブラウザに組み込まれているため 追加のインストールが不要 です。

これによって余計な依存関係を増やさずにAPI 通信ができます。
最初から手軽に使えるのはメリットですよね。

Service Worker との統合

他にも、fetch は、Service Worker との統合が容易です。

これによってオフライン対応のアプリケーションやプッシュ通知など、Progressive Web Apps (PWA) の開発 がしやすくなります。

// Service Worker 内での fetch イベントの処理
self.addEventListener("fetch", event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        if (response) {
          return response; // キャッシュがあれば返す
        }
        return fetch(event.request); // キャッシュがなければ通常の fetch を実行
      })
  );
});

このコードは　Service Worker 内で fetch イベントをリッスンし、キャッシュに対応するリクエストが存在すればそれを返し、存在しなければ通常の fetch を実行しています。

これによってオフライン対応やリソースのキャッシュ管理が可能になりますね。

AbortController によるリクエストのキャンセル

axios では CancelToken を使ってリクエストをキャンセルしていたのに対して、fetch では AbortController を使ってリクエストをキャンセルできます。

同様に、リクエストをキャンセルできることで 不要なリクエストの結果を無視 できます。

const controller = new AbortController();
const signal = controller.signal;

fetch("https://api.example.com/data", { signal })
  .catch(error => {
    if (error.name === "AbortError") {
      console.log("Request canceled:", error.message);
    } else {
      console.error("Error:", error);
    }
  });

controller.abort(); // リクエストをキャンセル

Axios と Fetch の違い

それでは axios と fetch の違いについてもう少し詳しく見ていきましょう。

JSON 変換の違い

先程の特徴でも紹介しましたが、axios は自動で JSON データを変換してくれるため、APIから受け取ったレスポンスをすぐに使えます。

一方 fetch では手動で .json() を使って変換する必要があります。

エラーハンドリングの違い

双方のエラーハンドリング方法にも違いがあります。

axios は .catch() を使って 簡単にエラーハンドリング ができますが、fetch ではレスポンスの ok プロパティをチェックする必要があります。

また、紹介したように axios ではリクエストとレスポンスのインターセプターを使って 共通のエラーハンドリング を行うことができます。
認証トークン追加やエラーログ収集などの共通の処理を一元管理できるのは便利ですよね。

機能の違い

axios には、リクエストとレスポンスのインターセプターやタイムアウトの設定など、fetch にはない機能が多く含まれています。

これによって axios を使うことでより高度なカスタマイズが可能になります。

プラットフォームの違い

axios は ブラウザと Node.js の両方で動作 しますが、fetch は ブラウザのみ で動作します。

この違いにより、環境によっては axios を使う方が便利になることがあります。

どちらを使うべきか

axios と fetch の違いを詳しく見てきましたが、どちらを使うべきかはプロジェクトの要件や個人の好みによって選ぶのが良いと思います。

fetch はシンプルな API 呼び出しに最適で、 追加のインストールが不要 なのがメリットです。
ただ、エラーハンドリングや JSON 変換などが手動で行わなければならない点に注意が必要です。

axios はより 多機能で便利なライブラリ です。
自動で JSON 変換を行ったり、リクエストとレスポンスのインターセプターを使ったカスタマイズが可能ですが追加でインストールが必要です。

最終的にはどちらも Web API との通信を行うことができるので、現在のプロジェクトや個人の使いやすい方を選択をすることが重要です。

まとめ

この記事では axios と fetch の違いについて詳しく解説しました！

それぞれの特徴と違いを理解して、プロジェクトの要件や好みに応じて適切なライブラリを選ぶことが大切です。
この記事が皆さんの選択の参考になれば幸いです。

Gizanbeak