Zenn
🐸

API通信どっち使うか問題

2024/10/30に公開
API
fetch
axios
tech

API通信どっち使えば良いの問題

AxiosとFetchの概要

  • Axios: PromiseベースのHTTPクライアントで、主にブラウザとNode.js環境で使用されます。簡単なAPIで、リクエストとレスポンスの処理が直感的に行えます。

  • Fetch: ネイティブのJavaScript APIで、Promiseベースのリクエストを提供します。XMLHttpRequestの代替として、よりシンプルで使いやすいインターフェースを提供します。

主な違い

1. エラーハンドリング

  • Axios:

    • ステータスコードが200〜299の範囲にある場合はthenが呼ばれ、それ以外はcatchでエラー処理を行います。
    • 例:
      axios.get('/api/data')
  .then(response => {
      console.log('成功:', response.data);
  })
  .catch(error => {
      console.error('エラー:', error.response.data);
  });

  • Fetch:

    • レスポンスが成功したかどうかを確認するために、response.okを使う必要があります。エラーが発生した場合でも、Promiseは解決されるため、別途エラーチェックが必要です。
    • 例:
      fetch('/api/data')
  .then(response => {
      if (!response.ok) {
          throw new Error('ネットワークエラー');
      }
      return response.json();
  })
  .then(data => {
      console.log('成功:', data);
  })
  .catch(error => {
      console.error('エラー:', error);
  });

2. 自動的なJSON変換

  • Axios:

    • レスポンスがJSONの場合、response.dataを使用するだけで自動的にパースされます。

  • Fetch:

    • レスポンスをJSONとして扱うためには、response.json()を呼び出す必要があります。
    • 例:
      fetch('/api/data')
  .then(response => response.json()) // 明示的にパース
  .then(data => {
      console.log('成功:', data);
  });

3. リクエストインターセプター

  • Axios:

    • インターセプターを使用してリクエストやレスポンスをカスタマイズすることができます。例えば、すべてのリクエストにトークンを追加することができます。
    • 例:
      axios.interceptors.request.use(config => {
    config.headers['Authorization'] = 'Bearer token';
    return config;
});

  • Fetch:

    • インターセプターは存在しませんが、関数をラップすることで似たような機能を実現することができます。

4. デフォルトの設定

  • Axios:

    • デフォルトの設定をグローバルに変更することが可能で、例えば、全てのリクエストに特定のヘッダーを追加できます。
    • 例:
      axios.defaults.headers.common['Authorization'] = 'Bearer token';

  • Fetch:

    • デフォルトの設定を変更する機能はなく、各リクエストに個別に設定する必要があります。

メリット・デメリット

特徴 Axios Fetch
エラーハンドリング ステータスコードによる自動処理 response.okを使って手動でチェック
JSON変換 自動的にパース 手動でresponse.json()を呼び出す
インターセプター あり なし（関数を使って代替可能）
デフォルト設定 簡単に変更可能 変更不可
互換性 Node.jsとブラウザの両方で使用可能 ブラウザのみで使用可能

個人的にはaxiosの方が使いやすいです。

Discussion