Axios と Fetch: HTTP リクエストにはどちらが最適ですか?

JavaScript で HTTP リクエストを行う方法はたくさんありますが、最も一般的な方法は、Axios とネイティブの fetch() API の 2 つです。この投稿では、これら 2 つの方法を比較対照して、どちらがさまざまなシナリオに適しているかを判断します。

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

HTTP リクエストは、Web アプリケーションのサーバーおよび API と通信するための基本です。 Axios と fetch() は両方とも、これらのリクエストを効果的に促進するために広く使用されています。それぞれの機能を詳しく見て、どのように積み重なるかを見てみましょう。

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

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('Server responded with:', error.response.status);
    } else if (error.request) {
      console.error('No response received');
    } else {
      console.error('Error:', error.message);
    }
  });

Axios を使用する理由

• 自動 JSON データ変換: データを JSON との間でシームレスに変換します。
• 応答タイムアウト: リクエストのタイムアウトを設定できます。
• HTTP インターセプター: リクエストと応答をインターセプトできます。
• ダウンロードの進行状況: ダウンロードとアップロードの進行状況を追跡します。
• 同時リクエスト: 複数のリクエストを同時に処理し、レスポンスを結合します。

フェッチとは何ですか?

fetch() は、最新の JavaScript の組み込み API であり、最新のすべてのブラウザーでサポートされています。これは、Promise の形式でデータを返す非同期 Web API です。

fetch() の特徴:

• 基本構文: シンプルかつ簡潔で、URL とオプションのオプション オブジェクトを受け取ります。
• 下位互換性: ポリフィルを備えた古いブラウザで使用できます。
• カスタマイズ可能: ヘッダー、本文、メソッド、モード、認証情報、キャッシュ、リダイレクト、および参照元ポリシーを詳細に制御できます。

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

まず、npm または Yarn を使用して Axios をインストールします。

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

CDN 経由で Axios を含めることもできます:

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('Server responded with:', error.response.status);
    } else if (error.request) {
      console.error('No response received');
    } else {
      console.error('Error:', error.message);
    }
  });

Axios を使用して GET リクエストを行う方法は次のとおりです。

npm install axios
# or
yarn add axios
# or
pnpm install axios

Fetch を使用した HTTP リクエストの作成

fetch() は組み込まれているため、何もインストールする必要はありません。 fetch() を使用して GET リクエストを行う方法は次のとおりです:

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

次の点に注意してください。

• データ処理: Axios はデータを JSON との間で自動的に変換しますが、fetch() を使用する場合は手動で response.json() を呼び出す必要があります。
• エラー処理: Axios は catch ブロック内のエラーを処理しますが、fetch() はネットワーク エラーでのみ Promise を拒否し、HTTP ステータス エラーでは拒否しません。

フェッチの基本構文

import axios from 'axios';

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

主な特徴:

• 単純な引数: URL とオプションの構成オブジェクトを受け取ります。
• 手動データ処理: データを文字列に手動で変換する必要があります。
• Response オブジェクト: 完全な応答情報を含む Response オブジェクトを返します。
• エラー処理: HTTP エラーの応答ステータス コードを手動でチェックする必要があります。

例：

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

Axios と Fetch の比較

クエリパラメータを含むGETリクエストの送信

アクシオス:

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

フェッチ:

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 error ' + response.status);
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

JSON 本文を使用した POST リクエストの送信

アクシオス:

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

フェッチ:

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 */ });

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

アクシオス:

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

フェッチ:

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 */ });

async/await 構文の使用

アクシオス:

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

フェッチ:

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

setTimeout(() => controller.abort(), 5000); // abort after 5 seconds

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

下位互換性

アクシオス:

• インストールしてプロジェクトに含める必要があります。
• Promise のポリフィルやその他の最新の JavaScript 機能を備えた古いブラウザをサポートします。
• 新しい環境との互換性のために積極的にメンテナンスされています。

フェッチ:

• 最新のブラウザでのネイティブ サポート。
• 古いブラウザをサポートするためにポリフィルすることができます。
• ブラウザのベンダーによって自動的に更新されます。

エラー処理

アクシオス:

catch ブロック内のエラーを処理し、2xx 以外のステータス コードをエラーとみなします。

async function getData() {
  try {
    const response = await axios.get('/api/data');
    // handle response
  } catch (error) {
    // handle error
  }
}

フェッチ:

手動ステータスチェックが必要です:

async function getData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    // handle data
  } catch (error) {
    // handle error
  }
}

Axios と Fetch: どちらが最適ですか?

要件によって異なるため、明確な答えはありません:

• 自動 JSON データ変換、HTTP インターセプター、高度なエラー処理などの機能が必要な場合は、Axios を使用します。
• 広範なカスタマイズ オプションを備えたネイティブで軽量なソリューションが必要な場合は、fetch() を使用します。

EchoAPIを使用してAxios/フェッチコードを生成する

EchoAPI は、API の設計、デバッグ、テスト、モック化のためのツールを提供するオールインワンの共同 API 開発プラットフォームです。 EchoAPI は、HTTP リクエストを行うための Axios コードを自動的に生成できます。

EchoAPI を使用して Axios コードを生成する手順:

1. EchoAPI を開き、新しいリクエストを作成します。

2. API エンドポイント、ヘッダー、パラメータを入力し、[コード スニペット] をクリックします。

3. 「クライアントコードの生成」を選択します。

4. 生成された Axios コードをコピーしてプロジェクトに貼り付けます。

結論

Axios と fetch() は両方とも、JavaScript で HTTP リクエストを作成するための強力なメソッドです。プロジェクトのニーズや好みに最も適したものを選択してください。 EchoAPI などのツールを利用すると、開発ワークフローが強化され、コードが正確かつ効率的になることが保証されます。コーディングを楽しんでください!

以上がAxios と Fetch: HTTP リクエストにはどちらが最適ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。