JavaScript 中 Axios 和 Fetch 的區別-js教程-PHP中文網

JavaScript 中 Axios 和 Fetch 的區別

Patricia Arquette

發布： 2024-09-25 06:16:32

原創

818 人瀏覽過

Difference Between Axios & Fetch in Javascript

在 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();
```
登入後複製