JavascriptにおけるAxiosとFetchの違い

JavaScript では、Axios とネイティブ Fetch API の両方を使用して HTTP リクエストを作成しますが、機能、使いやすさ、機能の点でいくつかの違いがあります。内訳は次のとおりです:

1. 使いやすさ:

• アクシオス:
  
  Axios は、リクエストの作成と応答の処理を簡素化します。 JSON 応答が自動的に解析されるため、作業が容易になります。
  

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

• フェッチ:
  
  フェッチでは、JSON 解析を明示的に処理する必要があり、追加の手順が追加されます。
  

   fetch('/api/user')
     .then(response => response.json())
     .then(data => console.log(data))
     .catch(error => console.error(error));
  

2. 応答処理:

• アクシオス: Axios は自動的に応答を解決し、応答ステータスが 2xx の範囲外の場合はエラーをスローするため、.catch() ブロックでエラーを直接処理できます。

• フェッチ:
  
  フェッチでは、2xx 以外のステータス コード (404 や 500 など) はエラーとして扱われません。応答ステータスを手動で確認し、必要に応じてエラーをスローする必要があります。
  

   fetch('/api/user')
     .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));
  

3. リクエストとレスポンスのインターセプト:

• アクシオス:
  
  Axios には組み込みのインターセプタが用意されており、リクエストを変更したり、レスポンスをグローバルに処理したりすることができます。これは、認証トークンの追加やロギングなどに役立ちます。
  

   axios.interceptors.request.use(config => {
     config.headers['Authorization'] = 'Bearer token';
     return config;
   });
  

• フェッチ:
  
  Fetch には組み込みインターセプターがないため、この動作が必要な場合は、フェッチ呼び出しをカスタム関数で手動でラップする必要があります。

4. ブラウザの互換性:

• アクシオス: Axios は古いブラウザ (IE 11 以前) で動作し、内部でポリフィルを処理します。
• フェッチ: Fetch API は Internet Explorer ではサポートされていません。古いブラウザでサポートするには、whatwg-fetch のようなポリフィルが必要になる場合があります。

5. データ処理:

• アクシオス:
  
  Axios は、POST リクエストを行うときにデータを自動的に文字列化し、Content-Type を application/json に設定します。 FormData などの他の形式でのデータの送信も簡単にサポートします。
  

   axios.post('/api/user', { name: 'John' });
  

• フェッチ:
  
  フェッチでは、データを手動で文字列化し、POST リクエストのヘッダーを設定する必要があります。
  

   fetch('/api/user', {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({ name: 'John' })
   });
  

6. リクエストのキャンセル:

• アクシオス:
  
  Axios には、CancelToken を使用してリクエストをキャンセルするためのサポートが組み込まれています。
  

   const source = axios.CancelToken.source();
   axios.get('/api/user', { cancelToken: source.token });
   source.cancel('Request canceled.');
  

• フェッチ:
  
  フェッチでは、AbortController を使用してリクエストをキャンセルする必要がありますが、これは少し複雑になる可能性があります。
  

   const controller = new AbortController();
   fetch('/api/user', { signal: controller.signal });
   controller.abort();
  

7. エラー処理:

• アクシオス: Axios は、2xx 以外の応答に対して自動的にエラーをスローし、エラー処理はより一貫性があり一元化されています。
• フェッチ: Fetch では、HTTP エラー ステータス コードではなく、ネットワーク エラーの Promise のみが拒否されるため、より手動のエラー処理が必要です。

結論：

• Axios は、より機能が豊富で使いやすく、リクエストを処理するためのより優れた抽象化を提供します。
• Fetch は、必要な依存関係が少ない最新のネイティブ API ですが、エラー、インターセプター、データ処理などの特定の機能を処理するには、より多くの手動作業が必要です。

リクエストをより細かく制御したい場合は、フェッチを使用することをお勧めします。 HTTP リクエストを簡素化するものが必要な場合は、axios がより良い選択肢になります。

以上がJavascriptにおけるAxiosとFetchの違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。