Axios と Fetch: プロジェクトにはどちらを選択すべきか-jsチュートリアル-php.cn

Axios vs Fetch: Which One Should You Choose for Your Project

導入

Web 開発では、Axios 対 fetch の間の議論は、ブラウザとサーバー間の通信に不可欠な HTTP リクエストの作成を中心に展開します。データの取得、フォームの送信、API との対話のいずれの場合でも、HTTP リクエストにより Web アプリケーションは動的に保たれます。開発者は多くの場合、fetch()、ブラウザーの組み込み機能、またはサードパーティのライブラリ Axios のいずれかを利用します。

Axios と fetch() は両方とも、GET、POST、PUT、DELETE などの一般的な HTTP リクエストを処理しますが、明確な利点があります。 Axios はそのシンプルさと強力な機能で人気がありますが、fetch() は軽量でブラウザに組み込まれているため、外部依存関係が回避されます。

このブログでは、Axios と fetch を比較し、主な違い、長所、短所を実際の例とともに強調し、プロジェクトに適切なツールを選択できるようにします。

Axios と fetch() の主な違い

Axios と fetch のどちらを選択するかを決めるときは、構文やセットアップからデータ処理や下位互換性まで、基本的な違いを理解することが重要です。以下では、決定を下す際に役立つ 2 つの主な対照について説明します。

1. 基本的な構文とセットアップ

Axios と fetch() の主な違いの 1 つは、構文の単純さです。以下に、両方のメソッドを使用した単純な HTTP リクエストがどのように見えるかを簡単に示します。

Axios の例:

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

ログイン後にコピー

fetch() 例:

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

ログイン後にコピー

Axios では、応答データは自動的に解析され、データオブジェクトに直接アクセスできます。 fetch() を使用する場合は、response.json() を呼び出して応答を手動で解析する必要があるため、Axios の標準的な操作がより簡潔になります。

2. データ処理、JSON 解析、シンプルさ

Axios とフェッチ の議論におけるもう 1 つの重要な違いは、データ処理を中心に展開されます。

自動 JSON 解析: Axios は JSON 解析を自動的に処理し、デフォルトでリクエストデータとレスポンスデータの両方を JSON に変換します。これは、データを手動で文字列化または解析する手間を省くことができるため、JSON API を使用する場合に便利です。対照的に、fetch() は解析と文字列化の両方を明示的に処理する必要があるため、少し冗長になります。

Axios の例 (データ処理):

  axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'Post Title',
    body: 'Post Content',
  })
  .then(response => console.log(response.data));

ログイン後にコピー

fetch() 例 (データ処理):

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

ログイン後にコピー

エラー処理: Axios では、HTTP エラーは自動的に処理され、2xx 範囲外のステータスコードを持つ応答は catch ブロックをトリガーします。これは、Axios がサーバーエラー (404 や 500 など) を例外として扱い、エラー管理がより直感的になることを意味します。対照的に、 fetch() はネットワーク障害の場合のみ拒否し、サーバーエラーの場合は解決します。エラーを処理するには、response.ok プロパティを手動で確認する必要があります。

fetch() 例 (エラー処理):

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

ログイン後にコピー

3. 下位互換性

Axios の大きな利点の 1 つは、古いブラウザのサポートです。 Axios は内部で XMLHttpRequest を使用するため、Internet Explorer 11 などの環境でも機能することができます。これにより、追加の構成を必要とせずに幅広いブラウザーとの互換性を必要とするプロジェクトに最適です。

一方、 fetch() は、より新しいブラウザー、具体的には Chrome 42 、Firefox 39 、Edge 14 、および Safari 10.3 でのみ動作する最新の API です。下位互換性が不可欠であり、それでも fetch() を使用したい場合は、ポリフィルを使用できます:

fetch() ポリフィルの使用:

  axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'Post Title',
    body: 'Post Content',
  })
  .then(response => console.log(response.data));

ログイン後にコピー

ポリフィルを使用したセットアップ例:

  fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      title: 'Post Title',
      body: 'Post Content'
    })
  })
  .then(response => response.json())
  .then(data => console.log(data));

ログイン後にコピー

このシナリオでは、whatwg-fetch によりネイティブ API をエミュレートすることで、古いブラウザーで fetch() が動作できるようになります。ただし、ポリフィルを追加するとバンドル全体のサイズが増加するため、パフォーマンス重視のアプリケーションにとっては欠点になる可能性があります。

Axios と fetch は、構文、データ処理、互換性において大きく異なります。 Axios は、JSON 解析やエラー処理などの一般的なタスクを簡素化し、迅速な開発を可能にします。ただし、fetch() はブラウザーでネイティブに利用できるため、JSON を手動で処理することに慣れていて、古いブラウザーのサポートを必要としない場合には、強力で軽量なオプションになります。

使いやすさと開発者のエクスペリエンス

開発者のエクスペリエンスに関して、Axios と fetch の間の議論は、一般的で複雑なシナリオに対して Axios がいかに簡単に使用できるかを中心に展開することがよくあります。シンプルさと柔軟性の点で両方がどのように機能するかを詳しく説明します。

1. 一般的なユースケースにおける Axios のシンプルさ

Axios は、HTTP リクエストをよりシンプルかつ直感的に行うように設計されています。特に GET リクエストや POST リクエストなどの標準的なユースケースに対して、セットアップが簡単な、簡潔で開発者にとって使いやすい API を提供します。

Axios を使用した単純な GET リクエストの例:

  fetch('https://jsonplaceholder.typicode.com/invalid-endpoint')
    .then(response => {
      if (!response.ok) {
        throw new Error('Server Error');
      }
      return response.json();
    })
    .catch(error => console.error('Error:', error));

ログイン後にコピー

わずか数行で、Axios は JSON 解析やエラー管理を含むリクエストとレスポンスのサイクル全体を処理します。応答が JavaScript オブジェクトに自動的に変換され、データの操作が容易になります。

2. エッジケースの fetch() の冗長性

fetch() は基本的なリクエストでは簡単ですが、タイムアウトの設定やエラーの管理など、複雑なシナリオを処理する場合はより冗長になります。

fetch() を使用したタイムアウトの処理例:

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

ログイン後にコピー

この例では、タイムアウトを管理するには、AbortController を設定するための追加のコードが必要です。これにより fetch() は柔軟になりますが、Axios の組み込みタイムアウト設定と比較してより多くの定型コードが必要になります。

3. Axios の簡潔な構文と fetch() の柔軟性

Axios の簡潔な構文:

Axios の構文は定型文を削減するように設計されており、少ないコード行でリクエストを処理しやすくなります。 JSON を自動的に変換し、エラー処理を簡素化し、開発を合理化するリクエストのキャンセルやインターセプターなどの組み込み機能を提供します。これは、迅速かつ効率的な HTTP インタラクションが重要なプロジェクトに最適です。
fetch() の柔軟性:

一方、 fetch() は、より柔軟でモジュール式のアプローチを提供します。デフォルトの動作を強制するものではないため、開発者はリクエストとレスポンスのサイクルを完全に制御できます。これにはより多くの手動処理が必要ですが、特定のニーズに合わせたカスタムソリューションを実装する柔軟性も提供されます。

パフォーマンスに関する考慮事項

Axios か fetch のどちらを選択するかは、多くの場合、パフォーマンスのニーズとプロジェクトの特定の要件によって決まります。

1. 性能要件に基づく適合性

簡単なリクエスト:

基本的なデータのフェッチには、通常、 fetch() の方が適しています。これは、外部の依存関係に依存しないため、バンドルサイズを削減する軽量の組み込みオプションです。
複雑なインタラクション:

Axios は、インターセプター、カスタムヘッダー、エラー処理などの機能が必要な複雑なシナリオに優れています。これらの組み込みツールにより、大規模なアプリケーションの開発時間を節約できるため、Axios はエンタープライズレベルのプロジェクトにとってより良い選択肢となります。

2. ネットワーク遅延と応答処理

ネットワーク遅延:

Axios と fetch() はどちらも同様の基盤テクノロジーに依存しているため、生の速度に大きな違いはありません。 Axios はその機能によりわずかなオーバーヘッドを引き起こす可能性がありますが、ほとんどのユースケースでは無視できることがほとんどです。
応答処理:

Axios は JSON 処理を簡素化し、応答を自動的に解析しますが、fetch() では response.json() による手動解析が必要です。これにより、Axios は JSON を多用するアプリケーションの開発時間をわずかに短縮できます。

3. Axios と fetch() を選択するシナリオ

Axios が過剰な場合:

プロジェクトに単純なリクエストと最小限のデータ処理が含まれる場合は、fetch() のネイティブで余計なもののないアプローチが理想的です。軽量アプリケーションの場合は、Axios の余分な重量を避けてください。
fetch() にヘルプが必要な場合:

一元化されたエラー処理、再試行、または複雑なヘッダーを必要とするアプリケーションの場合、 fetch() は煩雑になる可能性があります。このような場合、Axios は、大規模なカスタムコードを必要とせずに、より合理化されたソリューションを提供します。

これらのパフォーマンスの側面を理解することで、プロジェクトの複雑さと規模に基づいて Axios と fetch のどちらを選択するかを決定できます。

Axios と Fetch の機能比較

Axios と fetch の長所と短所を完全に理解するために、実際の例を使用して主な機能を調べてみましょう。

1. 自動データ変換

Axios は JSON 変換を自動的に処理し、追加コードなしでリクエストペイロードとレスポンスを変換します。

Axios の例 (自動 JSON 処理):

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

ログイン後にコピー

Axios では、JSON はリクエストとレスポンスの両方で自動的に解析され、プロセスが簡素化されます。

fetch() の例 (手動 JSON 解析):

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

ログイン後にコピー

fetch() を使用する場合、データを送信する前に手動で JSON.stringify() データを呼び出し、response.json() を呼び出して応答を解析する必要があるため、もう少し複雑になります。

2. タイムアウト管理

HTTP リクエストでは、タイムアウトの処理が困難になる場合があります。 Axios は、組み込みのタイムアウトプロパティを使用してこれをシンプルにします。

Axios の例 (組み込みタイムアウト):

  axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'Post Title',
    body: 'Post Content',
  })
  .then(response => console.log(response.data));

ログイン後にコピー

Axios では、タイムアウト設定を追加するのと同じくらい簡単にタイムアウトを設定できます。

fetch() の例 (タイムアウトに AbortController を使用する):

  fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      title: 'Post Title',
      body: 'Post Content'
    })
  })
  .then(response => response.json())
  .then(data => console.log(data));

ログイン後にコピー

fetch() を使用すると、タイムアウトには AbortController による追加手順が必要となり、Axios に比べて簡単ではなくなります。

3. エラー処理

エラー処理は、組み込みの分類機能を備えた Axios のもう 1 つの分野です。

Axios の例 (エラー分類):

  fetch('https://jsonplaceholder.typicode.com/invalid-endpoint')
    .then(response => {
      if (!response.ok) {
        throw new Error('Server Error');
      }
      return response.json();
    })
    .catch(error => console.error('Error:', error));

ログイン後にコピー

Axios はエラーを応答、要求、不明に分類し、デバッグを容易にします。

fetch() の例 (手動エラー処理):

npm install whatwg-fetch --save

ログイン後にコピー

fetch() では、デフォルトでは 2xx 以外のステータスコードの Promise を拒否しないため、response.ok を使用してサーバーエラーを手動でチェックする必要があります。

4. HTTP インターセプター

インターセプターにより、Axios によってネイティブにサポートされるリクエストと応答のグローバルな処理が可能になります。

Axios の例 (グローバルリクエストインターセプター):

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

ログイン後にコピー

Axios を使用すると、リクエストを送信する前にヘッダーやログ情報を簡単に追加できます。

fetch() の例 (カスタムインターセプターの実装):

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

ログイン後にコピー

fetch() にはネイティブインターセプターがありませんが、グローバル fetch メソッドを上書きすることで動作を模倣できます。

高度な使用例

1. 同時リクエスト

Web 開発では複数のリクエストを処理するのが一般的であり、Axios と fetch() にはそれぞれ独自の方法があります。

Axios の例 (axios.all を使用した同時リクエスト):

  axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'Post Title',
    body: 'Post Content',
  })
  .then(response => console.log(response.data));

ログイン後にコピー

Axios は、同時リクエストをきれいに処理するための axios.all() と axios.spread() を提供します。

fetch() の例 (Promise.all を使用した同時リクエスト):

  fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      title: 'Post Title',
      body: 'Post Content'
    })
  })
  .then(response => response.json())
  .then(data => console.log(data));

ログイン後にコピー

fetch() では、Promise.all() を使用して複数のリクエストを処理し、応答ごとに手動で解析する必要があります。

2. ファイルのアップロードと進行状況インジケーター

Axios では、サポートが組み込まれているため、ファイルのアップロードと進行状況の表示がより簡単になります。

Axios の例 (ファイルアップロードの進行状況インジケーター):

  fetch('https://jsonplaceholder.typicode.com/invalid-endpoint')
    .then(response => {
      if (!response.ok) {
        throw new Error('Server Error');
      }
      return response.json();
    })
    .catch(error => console.error('Error:', error));

ログイン後にコピー

Axios の onUploadProgress コールバックは、アップロードの進行状況をリアルタイムで表示するのに最適です。

fetch() の例 (ファイルのアップロードとダウンロードの進行状況):

npm install whatwg-fetch --save

ログイン後にコピー

fetch() を使用してファイルの進行状況を実装するには、ReadableStream を手動で処理する必要があり、複雑さが増します。

現実世界のシナリオ: Axios と fetch() を使用する場合

Axios と fetch のどちらを選択するかは、プロジェクトの特定のニーズに大きく依存します。各ツールがいつ最も効果的になるかを見てみましょう:

1. それぞれが輝くユースケース

小規模プロジェクト: 基本的なデータの取得を必要とする単純なプロジェクトを構築している場合は、多くの場合、 fetch() の方が良い選択です。軽量でブラウザに組み込まれており、外部依存関係の追加を回避します。これにより、API からの JSON データの取得やフォームの送信などの単純なタスクに最適になります。

例: 少数の API リクエストを行うだけで済む個人のブログや小規模な Web サイトは、大規模なライブラリのオーバーヘッドなしで fetch() を使用できます。

エンタープライズアプリケーション: 大規模プロジェクトでは、Axios は明確な利点を提供します。インターセプター、グローバル構成、自動データ変換などの組み込み機能により、コードのメンテナンスとエラー処理が簡素化されます。これにより、Axios は、構造化された一貫した HTTP 処理が重要となる複雑なアプリケーションにより適しています。

例: 複数の API とやり取りし、堅牢なエラー処理を必要とする財務ダッシュボードは、Axios の合理化されたセットアップと機能の恩恵を受けるでしょう。

2. 費用対効果の分析

Axios か fetch のどちらかを選択する場合、多くの場合、Axios の利点が追加の依存関係を正当化するかどうかを評価する必要があります。小規模なプロジェクトの場合は、多くの場合 fetch() で十分であり、バンドルサイズが最小限に抑えられ、セットアップが簡素化されます。ただし、保守性、コードの一貫性、高度な機能が重要なエンタープライズアプリケーションでは、Axios の利点がライブラリ追加のコストを上回る可能性があります。

CORS の処理

1. CORS とは何ですか?

Cross-Origin Resource Sharing (CORS) は、サーバーがリソースにアクセスできるユーザーを指定できるセキュリティ機能です。別のドメインにリクエストを行う場合、CORS ポリシーにより、アプリケーションが安全にデータを取得できることが保証されます。

Axios と fetch() は、どちらもブラウザの CORS ポリシーに依存しているため、CORS リクエストを同様に処理します。よくある間違いは、リクエストに Access-Control-Allow-Origin ヘッダーを追加することです。このヘッダーはサーバーによってのみ設定される必要があります。適切に構成されたサーバーは、許可されたオリジンを示すためにこのヘッダーを応答に含めます。

2. 適切な CORS セットアップ例

Axios の例:

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

ログイン後にコピー

fetch() 例:

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

ログイン後にコピー

どちらの場合も、サーバーがクロスオリジンリクエストを許可するように設定されていることを確認してください。

パフォーマンス最適化のヒント

Axios と fetch() の両方を最適化すると、特に大量のデータを処理する場合や頻繁にリクエストを行う場合に、アプリケーションのパフォーマンスを向上させることができます。

1. キャッシュ

Axios: axios-cache-adapter のようなキャッシュライブラリを使用して、応答をキャッシュし、冗長なネットワークリクエストを削減します。
fetch(): localStorage または sessionStorage API を使用して、フェッチされたデータを保存する単純なキャッシュメカニズムを実装します。

2. 応答処理

応答を効率的に処理してネットワーク負荷を軽減します:

Axios: インターセプターを使用して応答をグローバルに管理し、関連するデータのみを解析します。
fetch(): URL パラメーターまたはクエリ文字列を使用してサーバーの応答を制限し、不要なデータのフェッチを回避します。

3. ネットワーク負荷の最小化

Axios: CancelToken 機能を使用してリクエストが不要になった場合にリクエストをキャンセルし、無駄なネットワーク負荷を軽減します。
fetch(): AbortController を使用して、不要なリクエストを終了します。

Axios と fetch をいつ使用するかを理解し、これらの最適化テクニックを適用することで、ネットワークへの影響を最小限に抑えながらプロジェクトをスムーズに実行できます。

結論

Axios と fetch のどちらを選択するかは、最終的にはプロジェクトの複雑さと要件によって決まります。 Axios は、構造化コード、集中エラー処理、インターセプターなどの組み込み機能により開発を効率化できる、大規模なエンタープライズレベルのアプリケーションに最適です。一方、 fetch() は、ライブラリを追加するオーバーヘッドを発生させずに、シンプルで軽量なデータのフェッチを必要とする小規模なプロジェクトに最適です。最小限のセットアップで迅速に実装することを優先する開発者にとって、Axios は利便性を提供しますが、完全な制御と柔軟性を求める開発者は fetch() を高く評価します。代替手段を検討している場合は、React Query と Axios を比較して、より高度なデータ取得戦略を理解してください。選択は、アプリケーションの規模と要求に合わせて、シンプルさ、パフォーマンス、コードの保守性のバランスをとる必要があります。

以上がAxios と Fetch: プロジェクトにはどちらを選択すべきかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。