JavaScript 中 Axios 和 Fetch 的區別

在 JavaScript 中，Axios 和原生的 Fetch API 都用於發出 HTTP 請求，但它們在特性、易用性和功能方面存在一些差異。詳細介紹如下：

1. 易於使用：

• Axios：
  
  Axios 簡化了發出請求和處理回應。它會自動解析 JSON 回應，使其更易於使用。
  

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

• 取得：
  
  使用 fetch 時，需要明確處理 JSON 解析，這增加了額外的步驟。
  

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

2. 響應處理：

• Axios： 如果回應狀態超出 2xx 範圍，axios 會自動解析回應並拋出錯誤，因此您可以直接在 .catch() 區塊中處理錯誤。

• 取得：
  
  對於 fetch，非 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 提供內建攔截器，讓您全域修改請求或處理回應，這對於新增身份驗證令牌、日誌記錄等非常有用
  

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

• 取得：
  
  Fetch 沒有內建攔截器，因此如果需要此行為，您需要手動將 fetch 呼叫包裝在自訂函數中。

4. 瀏覽器相容性：

• Axios： Axios 適用於較舊的瀏覽器（IE 11 及更早版本）並在內部處理 polyfill。
• 取得： Internet Explorer 不支援 Fetch API。您可能需要像whatwg-fetch這樣的polyfill來在舊版瀏覽器中支援它。

5. 資料處理：

• Axios：
  
  Axios 在發出 POST 請求時會自動將資料字串化，並將 Content-Type 設為 application/json。它還支援輕鬆發送 FormData 等其他格式的資料。
  

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

• 取得：
  
  在 fetch 中，您需要手動將資料字串化並設定 POST 請求的標頭。
  

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

6. 取消要求：

• Axios：
  
  Axios 內建支援使用 CancelToken 取消請求。
  

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

• 取得：
  
  使用 fetch 時，您需要使用 AbortController 來取消請求，這可能會更複雜一些。
  

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

7. 錯誤處理：

• Axios： Axios 對於非 2xx 回應自動拋出錯誤，錯誤處理更一致且集中。
• 取得： Fetch 需要更多的手動錯誤處理，因為它只會拒絕網路錯誤的承諾，而不會拒絕 HTTP 錯誤狀態碼。

結論：

• Axios 功能更加豐富，易於使用，並為處理請求提供了更好的抽象。
• Fetch 是一種現代的原生 API，需要較少的依賴項，但需要更多的手動工作來處理某些功能，如錯誤、攔截器和資料處理。

如果您希望更好地控制您的請求，您可能會堅持使用 fetch。如果您想要簡化 HTTP 請求的東西，axios 將是更好的選擇。

以上是JavaScript 中 Axios 和 Fetch 的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章！