ポルトガル語版

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() メソッドでは、最終データに任意の変数を使用して名前を付けることができます。

結論

どちらにも利点があり、選択は特定のニーズや好みによって決まります。多くの API インタラクションを伴う大規模なアプリケーションを構築している場合、Axios を使用するといくつかのタスクが簡単になりますが、Fetch は単純なタスクに最適です。

Axios は、ほとんどの HTTP 通信タスクを簡素化するユーザーフレンドリーな API を提供します。ただし、ネイティブのブラウザ機能を使用したい場合は、Fetch API を使用して同様の機能を自分で実装することもできます。

これまで検討してきたように、ブラウザで利用できる fetch() メソッドを使用して Axios のコア機能を複製することは完全に可能です。クライアント HTTP ライブラリを含めるかどうかは、最終的にはネイティブ API の使いやすさとプロジェクトの特定の要件によって決まります。

詳細については、https://medium.com/trainingcenter/axios-ou-fetch-765e5db9dd59