Axios と Fetch API の比較

こんにちは！株式会社アルシエで教育に関するサポートをしている岸本です。

今回は「Axios と Fetch API の比較」についてお伝えしていきます。

Axiosとは？

Axiosは、JavaScriptでHTTPリクエストを行うための人気のあるライブラリです。

ブラウザ環境とNode.js環境の両方で利用でき、シンプルで使いやすいAPIを提供します。

HTTPリクエストの送信と、レスポンスの処理を容易に行うことができます。

Fetch APIとは？

Fetch APIは、最新のWebブラウザに組み込まれた、HTTPリクエスト用のJavaScriptインターフェースです。

Fetch APIは多くのユースケースでサードパーティのライブラリを必要とせず、標準のブラウザ機能として提供されています。

AxiosとFetch APIの比較

構文と使いやすさ

Fetchは最新のアプローチを提供しますが、特にJSONデータを処理する場合は少し冗長になることがあります。

Fetchを使用すると、以下のようなコードが必要です。

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

Axiosはより簡潔な構文を提供し、JSONデータを自動的に変換します。

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

適切な使用法:

Fetchはモダンな方法でHTTPリクエストを行いたい場合です。
特にJSONデータを取得する場合です。

エラー処理

Fetchはネットワークエラーの場合のみPromiseを拒否します。

HTTPエラー（例: 404や500）の場合はPromiseは解決されますが、応答オブジェクトを確認する必要があります。

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log(data));

AxiosはHTTPステータスが200～299の範囲外のHTTPエラーを自動的にエラーとして扱います。

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

適切な使用法:

エラー処理をより直感的に行いたい場合です。
HTTPエラーもエラーとして扱いたい場合です。

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

フェッチには組み込みのリクエストまたはレスポンスをインターセプトする機能はありません。

Axiosはリクエストまたはレスポンスが処理または送信される前にインターセプトできます。

認証ヘッダーの設定やログ記録などのタスクに役立ちます。

axios.interceptors.request.use(config => {
  config.headers['Authorization'] = 'Bearer token';
  return config;
});

適切な使用法:

リクエストまたはレスポンスを処理または変更したい場合です。

ブラウザのサポート

Fetch: 最新のブラウザではほぼすべてサポートされていますが、古いブラウザではポリフィルが必要です。

Axios: すべてのブラウザとNode.js環境で動作します。

適切な使用法:

古いブラウザをサポートする必要がある場合、またはブラウザの差異に気をつける必要がある場合。

キャンセル

ネイティブのFetchには、リクエストをキャンセルするための簡単な仕組みがありません。

AxiosはCancelTokenを使用してリクエストをキャンセルする仕組みを提供します。

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

axios.get('https://api.example.com/data', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  }
});

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