AxiosとFetch：どちらがHTTPリクエストに最適か？

JavaScriptでHTTPリクエストを行う方法はいくつかありますが、その中で最も人気のある2つはAxiosとネイティブのfetch()APIです。本記事では、これら2つの方法を比較し、それぞれのシナリオにどちらが適しているかを見ていきます。

HTTPリクエストの重要な役割

HTTPリクエストは、WebアプリケーションでサーバーやAPIと通信するために不可欠です。Axiosとfetch()はどちらも広く使用されており、これらを効果的に利用するための特徴を見ていきましょう。

Axiosとは？

Axiosは、HTTPリクエストを行うためのPromiseベースのHTTPクライアントライブラリです。シンプルで柔軟な構成が特徴で、JavaScriptコミュニティで広く使用されています。

Axiosの基本的な構文

axios(config)
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

Axiosの主な特徴：

• 設定の柔軟性：URLと設定オブジェクトの両方を受け付けます。
• 自動データ処理：データをJSONに自動的に変換します。
• エラーハンドリング：HTTPのエラーステータスコードを自動的に処理し、catchブロックに渡します。
• 簡素化されたレスポンス：サーバーデータはレスポンスオブジェクトのdataプロパティに直接返されます。
• エラーマネジメントの簡素化：エラー処理機構が簡素化されています。

例：

axios({
  method: 'post',
  url: 'https://api.example.com/data',
  data: { key: 'value' }
})
  .then(response => console.log(response.data))
  .catch(error => {
    if (error.response) {
      console.error('サーバーが返したレスポンス:', error.response.status);
    } else if (error.request) {
      console.error('レスポンスがありません');
    } else {
      console.error('エラー:', error.message);
    }
  });

Axiosを使用する理由：

• 自動的なJSONデータ変換：データの変換がシームレスに行われます。
• レスポンスタイムアウト：リクエストのタイムアウトを設定できます。
• HTTPインターセプター：リクエストとレスポンスをインターセプトできます。
• ダウンロード進行状況：ダウンロードおよびアップロードの進行状況を追跡します。
• 複数のリクエストを同時に処理：複数のリクエストを同時に処理し、レスポンスをまとめます。

Fetchとは？

**fetch()**は、現代のJavaScriptで使用可能なネイティブAPIで、すべてのモダンブラウザでサポートされています。非同期Web APIであり、データはPromiseとして返されます。

fetch()の特徴：

• 基本構文：シンプルで簡潔。URLとオプションの設定オブジェクトを受け取ります。
• 後方互換性：ポリフィルを使用して、古いブラウザでも使用できます。
• カスタマイズ性：ヘッダー、ボディ、メソッド、モード、資格情報、キャッシュ、リダイレクト、およびリファラポリシーに対する詳細な制御が可能です。

AxiosでHTTPリクエストを行う方法

まず、npmまたはyarnでAxiosをインストールします：

npm install axios
# または
yarn add axios
# または
pnpm install axios

CDN経由でAxiosをインクルードすることもできます：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

GETリクエストをAxiosで行う方法は以下の通りです：

import axios from 'axios';

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

Fetchを使用してHTTPリクエストを行う方法

fetch()はビルトインなので、特にインストールは必要ありません。GETリクエストをfetch()で行う方法は以下の通りです：

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

注意点：

• データ処理：Axiosは自動的にデータをJSONに変換しますが、fetch()ではresponse.json()を手動で呼び出す必要があります。
• エラーハンドリング：Axiosはエラーをcatchブロック内で処理しますが、fetch()はネットワークエラーに対してのみPromiseを拒否し、HTTPステータスエラーについては自動的に拒否しません。

Fetchの基本構文

fetch(url, options)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

主な特徴：

• シンプルな引数：URLとオプションの設定オブジェクトを受け取ります。
• 手動データ処理：データを手動で文字列に変換する必要があります。
• レスポンスオブジェクト：レスポンスの詳細な情報を含むResponseオブジェクトが返されます。
• エラーハンドリング：HTTPエラーのステータスコードを手動で確認する必要があります。

例：

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ key: 'value' })
})
  .then(response => {
    if (!response.ok) throw new Error('HTTPエラー ' + response.status);
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

AxiosとFetchの比較

クエリパラメータ付きのGETリクエスト

Axios:

axios.get('/api/data', { params: { name: 'Alice', age: 25 } })
  .then(response => { /* handle response */ })
  .catch(error => { /* handle error */ });

Fetch:

const url = new URL('/api/data');
url.searchParams.append('name', 'Alice');
url.searchParams.append('age', 25);

fetch(url)
  .then(response => response.json())
  .then(data => { /* handle data */ })
  .catch(error => { /* handle error */ });

JSONボディ付きのPOSTリクエスト

Axios:

axios.post('/api/data', { name: 'Bob', age: 30 })
  .then(response => { /* handle response */ })
  .catch(error => { /* handle error */ });

Fetch:

fetch('/api/data', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Bob', age: 30 })
})
  .then(response => response.json())
  .then(data => { /* handle data */ })
  .catch(error => { /* handle error */ });

リクエストのタイムアウト設定

Axios:

axios.get('/api/data', { timeout: 5000 }) // 5秒
  .then(response => { /* handle response */ })
  .catch(error => { /* handle error */ });

Fetch:

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

setTimeout(() => controller.abort(), 5000); // 5秒後に中止

fetch('/api/data', { signal })
  .then(response => response.json())
  .then(data => { /* handle data */ })
  .catch(error => { /* handle error */ });

async/await構文の使用

Axios:

const fetchData = async () => {
  try {
    const response = await axios.get('/api/data');
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
};

Fetch:

const fetchData = async () => {
  try {
    const response = await fetch('/api/data');
    if (!response.ok) throw new Error('HTTPエラー ' + response.status);
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
};

まとめ

• Axiosは、エラーハンドリング、タイムアウト設定、自動的なJSON変換、HTTPインターセプター、リクエストとレスポンスのインターセプトなど、さまざまな機能を提供するHTTPクライアントライブラリです。
• **fetch()**は、シンプルで軽量なAPIで、より詳細な制御が可能ですが、エラーハンドリングやデータの変換に関しては自分で処理を記述する必要があります。

選択するツールは、プロジェクトのニーズやチームの好みによって異なります。Axiosは多機能で扱いやすい一方で、fetch()は軽量でシンプルな用途に最適です。