はじめに

こんにちはいでです。
この記事では、JavaScriptでHTTPリクエストを行う際の主要な手段であるaxiosとfetchについて比較し、違いやそれぞれのメリットデメリットを説明したいと思います。

fetch とは

fetchは、ChromeやFirefoxモダンブラウザに標準で組み込まれているAPIです。外部ライブラリをインストールする必要なく、HTTPリクエストを行うことができます。

fetchのインターフェースがシンプルで直感的です。URLを指定して呼び出すだけでチクエストを送信することができます。

一方でHTTPエラーステータス（404や500など）をエラーとして扱わず、Promiseを正常に解決してしまうため、ステータスコードを確認しエラーハンドリングを行う必要があります。

fetchの基本的な使用方法

GETリクエスト

デフォルトのfetchはGETリクエストを送信できます。

fetch('https://api.example.com/city')
  // レスポンスが受信できたら、JSON形式に変換
  .then(response => response.json())
  // 変換されたJSONデータを処理する
  .then(data => console.log(data))
  // エラーが発生した場合にエラーメッセージを出力
  .catch(error => console.error('Error:', error));

POSTリクエスト

ヘッダーやボディを指定してカスタマイズできます。

const requestData = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'ide',
    pref: 'tokyo'
  })
};

fetch('https://api.example.com/city', requestData)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

カスタムリクエスト

カスタムヘッダーやリクエストオプションを指定できます。

const options = {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer token-data',
    'Content-Type': 'application/json'
  }
};

fetch('https://api.example.com/city', options)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

エラーハンドリング

fetchはHTTPステータスコードがエラー（4xxや5xx）であってもプロミスを解決するため、エラーハンドリングを自分で行う必要があります。

ネットワークエラーやレスポンスエラーに対するハンドリングが必要です。

fetch('https://api.example.com/city')
  .then(response => {
    // HTTPステータスコードをチェック
    if (!response.ok) {
      // ステータスコードが2xxではない場合、エラーをスロー
      throw new Error(response.statusText);
    }
    // 正常な場合は、レスポンスをJSONとする
    return response.json();
  })
  .then(data => {
    // JSONデータを使用して処理を実施
    console.log(data);
  })
  .catch(error => {
    // エラーの処理
    console.error(error);
  });

catchに入るのは以下のような場合になります。

ネットワークエラー
ネットワークの問題によりリクエストが失敗した場合、ネット接続がない場合やサーバーに到達できない場合はfetchがプロミスを拒否（reject）します。
ステータスコードが200系ではない場合
fetch関数は、HTTPステータスコードが200系ではない場合でもプロミスを解決（resolve）します。そのためステータスコードのチェックを行い、response.okがfalseの場合にエラーをスローする必要があります。
JSONのパースエラー
response.json()で、レスポンスが正しいJSON形式でない場合にエラーをスローします。

リクエストの中断方法

加藤さんが書いた記事が参考になります！

tech.iimon.co.jp

axiosの特徴

axiosは、ブラウザやNode.jsでHTTPリクエストを行うためのPromiseベースのライブラリで、非同期処理を行います。これにより、.then(), .catch(), .finally() メソッドを通じて、リクエストの成功、失敗、完了を簡単に操作する事ができます。

また、リクエストのキャンセル機能も標準で存在しています。

axios.get('https://api.example.com/city')
  .then(response => {
    console.log(response.data); // 成功時の処理
  })
  .catch(error => {
    console.error('Error:', error); // 失敗時の処理
  })
  .finally(() => {
    console.log('Request completed'); // 成功・失敗に関わらず実行される処理
  });

GETリクエスト

const axios = require('axios');

axios.get('https://api.example.com/city')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

POSTリクエスト

const axios = require('axios');

axios.post('https://api.example.com/city', {
  name: 'ide',
  pref: 'tokyo'
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

キャンセル機能

リクエストをキャンセルすることが標準機能として存在しています。

CancelTokenを使用することで、不要になったHTTPリクエストをキャンセルすることができます。実行時間が長いAPIの呼び出しを中止する必要が時に使えますね！

const axios = require('axios');

// CancelTokenを作成
const CancelToken = axios.CancelToken;
// キャンセル関数を格納する変数
let cancel; 

axios.get('https://api.example.com/city', {
  cancelToken: new CancelToken(function executor(c) {
    // executorが呼び出され、キャンセル関数（c）を設定
    cancel = c; // cancelがあとで呼び出せるようになる
  })
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    // リクエストがキャンセルされた場合
    if (axios.isCancel(error)) {
      console.log(error.message);
    } else {
      // その他のエラーが発生した場合
      console.error('Error:', error);
    }
  });



// 上記のリクエストがまだ完了していない場合、
// cancel関数を呼び出すことで、リクエストがキャンセルできる
cancel();

CancelTokenのexecutor関数は、キャンセル関数（ここではc）を引数として受け取り、それをcancel変数に格納します。これにより後にcancel変数を使ってリクエストをキャンセルできるようになります。

cancelが実行されると、リクエストがキャンセルされ、axios.getのcatchブロックでエラーハンドリングが行われます。キャンセルした場合、axios.isCancel(error)がtrueを返し、キャンセル時の処理を実施することができます。
これで「処理を中止しました」などのメッセージを表示することもできますね。

まとめ

axiosとfetchの比較

axiosのメリットとデメリット

メリット

自動的なJSON変換:
- リクエストデータやレスポンスデータを自動的にJSON形式に変換する
ブラウザとNode.jsでの利用:
- ブラウザとNode.jsの両方で動作し、クライアントサイドとサーバーサイドの両方で利用できる
エラーハンドリングが簡単:
- ステータスコードに基づいた詳細なエラーハンドリングが可能。
リクエストキャンセル:
- リクエストのキャンセル機能が標準で存在。

デメリット

依存関係:
- 外部ライブラリのため、プロジェクトに追加する必要があり依存関係やバージョンのアップデータをする必要がある。
パッケージのサイズ:
- ライブラリのサイズが大きい。

fetchのメリットとデメリット

メリット

組み込みAPI:
- モダンなブラウザに組み込まれているため、追加ライブラリが不要です。

デメリット

自動的なJSON変換がない レスポンスを自動的にJSONに変換しないため、手動で変換する必要があります。
エラーハンドリングが難しい HTTPエラーステータスを自動的にエラーとして扱わないため、エラーハンドリングが複雑になります。
リクエストのキャンセルが難しい AbortControllerを使用してリクエストをキャンセルする必要があります。

比較

項目	axios	fetch
依存関係	外部ライブラリが必要（アップデートも必要）	組み込みAPI
JSON変換	自動的にJSONを変換	手動でJSONを変換
エラーハンドリング	ステータスコードに基づいた詳細なエラーハンドリングが可能	手動でステータスコードをチェックする必要がある
リクエストキャンセル	標準でリクエストキャンセル機能を提供	`AbortController`を使用してキャンセル
使用環境	ブラウザとNode.jsの両方で利用可能	ブラウザのみ