AxiosとFetch API?適切な HTTP クライアントの選択

TL;DR: Axios と Fetch API は、一般的な HTTP クライアントです。 Axios は、より多くの機能と簡単なエラー処理を提供する一方、Fetch API は軽量でブラウザにネイティブです。複雑なプロジェクトには Axios を選択し、より単純なプロジェクトには Fetch を選択してください

非同期 HTTP リクエストを処理する最も一般的なメソッドの 2 つは、fetch() と Axios です。一般的な操作にもかかわらず、処理するために選択したリクエストのタイプは、アプリの使いやすさと全体的な効率に大きな影響を与える可能性があります。したがって、いずれかを選択する前に、それらを徹底的に調べ、長所と短所を比較検討することが賢明です。

この記事では、プロジェクトに最適な選択を行えるよう、広く使用されている 2 つのツールを包括的に比較します。

アクシオスとは何ですか？

は、ブラウザー ( XMLHttpRequests ) および Node.js (HTTP) 環境でよく見られる Promise ベースのサードパーティ HTTP クライアントです。リクエストとレスポンスをインターセプトし、リクエストのキャンセルを実行し、レスポンス データを JSON 形式に自動的に解析できる便利な API を提供します。 Axios は、XSRF (クロスサイト リクエスト フォージェリ) に対するクライアント側の保護もサポートしています。 Axios は、npm などのパッケージ マネージャーを使用してインストールすることも、CDN 経由でプロジェクトに追加することもできます。

// NPM
npm install axios

// CDN
<script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>

アクシオスのメリット

• リクエストの自動キャンセル。
• 組み込みのエラー処理、インターセプター、クリーンな構文。
• 古いブラウザから最新のブラウザまで幅広い互換性があります。
• 約束ベース。

アクシオスのデメリット

• 外部依存性。
• バンドルのサイズが大きく、複雑さが顕著です。

fetch()とは何ですか?

Fetch API も Promise ベースですが、最新のすべてのブラウザで利用できるネイティブ JavaScript API です。 Node.js 環境とも互換性があり、従来の XMLHttpRequests をよりシンプルで現代的なアプローチに置き換えました。 Fetch API は、リクエストを送信するための fetch() メソッドを提供し、JSON、Blob、FormData などの複数のリクエストおよび応答タイプをサポートします。

fetch() の利点

• ネイティブブラウザのサポートのため、外部依存はありません。
• 軽量でより簡単な API。
• 約束ベース。
• fetch() は低レベル API です。したがって、よりきめ細かい制御が可能になります。

fetch() の欠点

• Axios と比較して、エラー処理とリクエストのタイムアウトに関する組み込み機能が制限されています。
• 一般的なタスクの詳細なコード。

Axios と fetch() の違い

Axios と fetch() が何であるかを理解できたので、コード例を使用してこれら 2 つの主要な機能を比較対照してみましょう。

基本的な構文

構文に関する限り、Axios は fetch() よりもコンパクトで開発者に優しい構文を提供します。

Axios を使用した単純な POST リクエスト:

// NPM
npm install axios

// CDN
<script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>

fetch() を使用した同様の POST リクエスト:

axios.post('https://jsonplaceholder.typicode.com/todos', {
  userId: 11,
  id: 201,
  title: "Try Axios POST",
  completed: true
})
.then(response => {
  document.getElementById('output').innerHTML = `
    <h2>Post Created:</h2>
    <p>Title: ${response.data.title}</p>
    <p>Completed status: ${response.data.completed}</p>
  `;
})
.catch(error => {
  console.error('Error:', error);
  document.getElementById('output').innerHTML = '<p>Error creating post.</p>';
});

fetch() は軽量ですが、いくつかの一般的なタスクを実行するにはさらに多くの手動作業が必要であるため、これは非常に顕著です。たとえば、Axios には自動 JSON 解析機能が備わっており、応答のデータ オブジェクトに直接アクセスできます。対照的に、fetch() では、JSON 形式への応答を手動で解析する必要があります。どちらのアプローチでも同様の結果が得られますが、fetch() でエラー、シリアル化、ヘッダーを明示的に処理する必要があります。

エラー処理

エラーの処理は、開発者がほぼ毎日遭遇するものです。たとえば、Axios は、ステータス コードが 2xx の範囲外である HTTP 呼び出しをデフォルトでエラーとして処理します。エラーの管理とデバッグに役立つ説明オブジェクトが提供されます。

fetch('https://jsonplaceholder.typicode.com/todos', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ // Manually converting the object to JSON
    userId: 11,
    id: 202,
    title: 'Try Fetch POST',
    completed: true
  })
})
.then(response => {
  if (!response.ok) { // Manual error handling for HTTP errors
    throw new Error('Error creating post');
  }
  return response.json(); // Manually parsing the response to JSON
});

fetch() は、HTTP エラー (ステータス コード 4xx または 5xx) を自動的にエラーとして扱いません。条件チェックを手動で実行して応答ステータスを特定し、エラーを捕捉する必要があります。ただし、プロジェクト内にカスタムのエラー処理ロジックを含めて、情報を収集し、Axios と同様にエラーを処理することができます。

axios.get('https://jsonplaceholder.typicode.com/invalid_endpoint')
 .then(response => {
  console.log(response.data);
 })
 .catch(error => {
  if (error.response) {
   // Server responded with a status outside of 2xx
   console.log('Error Status:', error.response.status);
   console.log('Error Data:', error.response.data);
 } else if (error.request) {
   console.log('Error Request:', error.request);
 } else {
   console.log('Error Message:', error.message);
 }});

ブラウザとの下位互換性

Internet Explorer (IE11) などの古いブラウザーや、最新のブラウザーの古いバージョンなど、従来の依存関係との互換性が必要な場合、頼りになるソリューションは Axios です。

fetch() は最新のブラウザにネイティブであり、ブラウザとシームレスに機能します。ただし、一部の古いバージョンのブラウザはサポートしていません。 fetch() を使用しないブラウザでも動作させるために、whatwg-fetch などのポリフィルとともに使用することができます。ただし、ポリフィルを使用するとバンドル サイズが増加し、パフォーマンスに影響を与える可能性があることに注意することが重要です。

!(https://www.syncfusion.com/blogs/wp-content/uploads/2024/11/Fetch-compatibility.png)

HTTP インターセプター

HTTP インターセプターはリクエストとレスポンスのインターセプトを可能にし、次の場合に役立ちます。

• リクエストの変更 (ヘッダーに認証を追加する場合など)。
• 応答の変換 (応答データの前処理)。
• エラーをグローバルに処理します (不正な 401 が発生した場合はログに記録し、リダイレクトします)。

この強力な機能は Axios に付属していますが、fetch() ではネイティブにサポートされていません。

Axios を使用したリクエストへの認証トークンの追加:

// NPM
npm install axios

// CDN
<script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>

ただし、fetch() が HTTP インターセプトを実行できないという意味ではありません。ミドルウェアを使用してカスタム ラッパーを手動で作成し、この動作を模倣することができます。

fetch() ラッパーを使用してリクエストに認証トークンを追加する:

axios.post('https://jsonplaceholder.typicode.com/todos', {
  userId: 11,
  id: 201,
  title: "Try Axios POST",
  completed: true
})
.then(response => {
  document.getElementById('output').innerHTML = `
    <h2>Post Created:</h2>
    <p>Title: ${response.data.title}</p>
    <p>Completed status: ${response.data.completed}</p>
  `;
})
.catch(error => {
  console.error('Error:', error);
  document.getElementById('output').innerHTML = '<p>Error creating post.</p>';
});

応答タイムアウト

応答タイムアウトとは、クライアントがサーバーの応答を待つ時間を指します。この制限時間に達すると、リクエストは失敗としてカウントされます。 Axios と fetch() はリクエストのタイムアウトをサポートしています。これは、信頼性の低いネットワークや遅いネットワークを扱う場合に不可欠です。それでも、Axios はタイムアウト管理に対するより直接的なアプローチを提供することで主導権を握っています。

Axios でのリクエストのタイムアウト:

fetch('https://jsonplaceholder.typicode.com/todos', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ // Manually converting the object to JSON
    userId: 11,
    id: 202,
    title: 'Try Fetch POST',
    completed: true
  })
})
.then(response => {
  if (!response.ok) { // Manual error handling for HTTP errors
    throw new Error('Error creating post');
  }
  return response.json(); // Manually parsing the response to JSON
});

fetch() によるリクエストがタイムアウトしました:

axios.get('https://jsonplaceholder.typicode.com/invalid_endpoint')
 .then(response => {
  console.log(response.data);
 })
 .catch(error => {
  if (error.response) {
   // Server responded with a status outside of 2xx
   console.log('Error Status:', error.response.status);
   console.log('Error Data:', error.response.data);
 } else if (error.request) {
   console.log('Error Request:', error.request);
 } else {
   console.log('Error Message:', error.message);
 }});

Axios は、タイムアウト オプションを使用するクリーンなコードでタイムアウトをより簡単かつ適切に処理します。ただし、fetch() には、AbortController() を使用した手動のタイムアウト処理が必要です。これにより、リクエストをいつどのように中止するかをより詳細に制御できます。

GitHub リファレンス

詳細については、GitHub リポジトリにある Axios と Fetch の完全な例を参照してください。

結論

多くのツールと同様、Axios と Fetch API には長所と短所があります。 JSON の自動解析、統合されたエラー処理、複雑なプロセスを合理化するインターセプターが必要な場合は、Axios を使用してください。最新のブラウザ環境に最適で、外部ライブラリを必要としない純粋でシンプルなインターフェイスが必要な場合は、fetch() を選択してください。つまり、どちらもうまく機能しますが、さまざまなレベルの複雑さと機能要件に適しています。

関連ブログ

• JavaScript で HTTP エラーを処理する 5 つのベスト プラクティス
• HTTP リクエストを処理するための Chrome 拡張機能トップ 5
• ASP.NET HTTP ハンドラーとモジュールを ASP.NET Core ミドルウェアに移行する方法
• フェッチ リクエストを使用して Syncfusion ASP.NET MVC DataGrid で CRUD アクションを効率的に処理する

以上がAxiosとFetch API?適切な HTTP クライアントの選択の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。