アクシオス vs フェッチ-jsチュートリアル-php.cn

アクシオス vs フェッチ

DDD

リリース： 2024-10-01 06:30:03

オリジナル

649 人が閲覧しました

Axios vs Fetch

ポルトガル語版

Axios と Fetch は、JavaScript で HTTP リクエストを作成するための一般的なツールですが、いくつかの重要な違いがあります。概要は次のとおりです:

アクシオス

組み込み機能: Axios には、自動 JSON 変換、リクエストとレスポンスのインターセプター、リクエストのキャンセルなど、多くの組み込み機能が付属しています。
ブラウザの互換性: Internet Explorer を含む古いブラウザをサポートします。
エラー処理: Axios は HTTP エラーステータス (404 や 500 など) の Promise を自動的に拒否し、エラー処理を容易にします。
リクエスト/レスポンスインターセプター: リクエストまたはレスポンスを簡単な方法でグローバルに変更できます。
リクエストのキャンセル: Axios は、リクエストをキャンセルする簡単な方法を提供します。

フェッチ

ネイティブ API: Fetch はネイティブ Web API であるため、追加のライブラリをインストールする必要はありません。
Promise-Based: Promise を使用しますが、エラーの応答ステータスを手動で確認する必要があります。
ストリーム処理: フェッチはストリーミングをサポートしており、大規模な応答の処理に役立ちます。
さらなる制御: リクエストをより詳細に制御できますが、パターンの設定やリクエストのインターセプトなどの機能には、より多くの追加コードが必要です。
JSON の組み込みサポートはありません: JSON データを解析するには、応答オブジェクトで .json() を呼び出す必要があります。

使用例

特に複雑なアプリケーションの場合、すぐに使える豊富な機能セットが必要な場合は、Axios を使用します。
より単純な使用例、または外部依存関係を回避したい場合は、Fetch を使用します。

使用例

アクシオス:

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

const options = {
  url: 'http://localhost/test.htm',
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json;charset=UTF-8'
  },
  data: {
    a: 10,
    b: 20
  }
};
axios(options)
  .then(response => {
    console.log(response.status);
  });

ログイン後にコピー

フェッチ:

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

const url = "https://jsonplaceholder.typicode.com/todos";
const options = {
  method: "POST",
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json;charset=UTF-8",
  },
  body: JSON.stringify({
    a: 10,
    b: 20,
  }),
};
fetch(url, options)
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
  });

ログイン後にコピー

注:

データを送信するには、fetch() は POST リクエストの body プロパティを使用しますが、Axios は data プロパティを使用します。
fetch() 内のデータは、JSON.stringify メソッドを使用して文字列に変換されます。
Axios はサーバーから返されたデータを自動的に変換しますが、fetch() では、response.json() メソッドを呼び出してデータを JavaScript オブジェクトに解析する必要があります。
Axios を使用すると、サーバーから提供されたデータ応答にデータオブジェクト内でアクセスでき、fetch() メソッドでは、最終データに任意の変数を付けることができます。