Axios 與 Fetch：您應該為您的專案選擇哪一個

介紹

在 Web 開發中，Axios 與 fetch 之間的爭論圍繞著發出 HTTP 請求，這對於瀏覽器和伺服器之間的通訊至關重要。無論您是獲取資料、提交表單還是與 API 交互，HTTP 請求都能讓 Web 應用程式保持動態。開發人員通常依賴內建瀏覽器功能 fetch() 或第三方函式庫 Axios。

Axios 和 fetch() 都可以處理常見的 HTTP 請求，例如 GET、POST、PUT 和 DELETE，但具有明顯的優勢。 Axios 因其簡單性和強大的功能而廣受歡迎，而 fetch() 是輕量級的，內建於瀏覽器中，避免了外部依賴。

本部落格將比較 Axios 與 fetch，透過實際範例突出它們的主要差異、優點和缺點，幫助您為您的專案選擇正確的工具。

Axios 和 fetch() 之間的核心差異

在 Axios 與 fetch 之間做出決定時，了解它們的根本差異非常重要，從語法和設定到資料處理和向後相容性。下面，我們將探討兩者之間的主要對比，以幫助您做出決定。

1. 基本語法與設定

Axios 和 fetch() 之間的主要區別之一是它們語法的簡單性。以下是使用這兩種方法的簡單 HTTP 請求的快速瀏覽：

Axios 範例：

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

fetch() 例：

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

在axios中，自動解析回應數據，可以直接存取資料物件。使用fetch()，需要透過呼叫response.json()手動解析回應，使得axios對於標準操作更加簡潔。

2. 資料處理、JSON 解析與簡單性

Axios 與 fetch 討論中的另一個關鍵區別圍繞著資料處理：

• 自動 JSON 解析： axios 會自動處理 JSON 解析，預設將請求和回應資料都轉換為 JSON。這在使用 JSON API 時非常方便，因為它使您無需手動字串化或解析資料。相較之下，fetch() 需要明確處理解析和字串化，這使得它稍微冗長一些。

Axios 範例（資料處理）：

  axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'Post Title',
    body: 'Post Content',
  })
  .then(response => console.log(response.data));

fetch() 範例（資料處理）：

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

• 錯誤處理： 在 Axios 中，HTTP 錯誤會自動處理，任何狀態碼超出 2xx 範圍的回應都會觸發 catch 區塊。這意味著 Axios 將伺服器錯誤（如 404 或 500）視為異常，使錯誤管理更加直覺。相反， fetch() 僅在網路故障時拒絕，並且仍然解決伺服器錯誤。您需要手動檢查 response.ok 屬性以處理錯誤。

fetch() 範例（錯誤處理）：

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

3. 向後相容性

Axios 的一個顯著優勢是它對舊版瀏覽器的支援。 Axios 在底層使用 XMLHttpRequest，使其甚至可以在 Internet Explorer 11 等環境中運作。這使其成為需要廣泛的瀏覽器相容性而無需額外配置的項目的絕佳選擇。

另一方面， fetch() 是一種現代 API，僅適用於較新的瀏覽器 - 特別是 Chrome 42 、 Firefox 39 、 Edge 14 和 Safari 10.3 。如果向後相容性很重要且您仍然喜歡使用 fetch()，則可以使用 polyfill：

用 fetch() Polyfill：

  axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'Post Title',
    body: 'Post Content',
  })
  .then(response => console.log(response.data));

使用 Polyfill 的設定範例：

  fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      title: 'Post Title',
      body: 'Post Content'
    })
  })
  .then(response => response.json())
  .then(data => console.log(data));

在這種情況下，whatwg-fetch 允許 fetch() 透過模擬本機 API 在舊版瀏覽器中運作。然而，添加 Polyfill 會增加整體套件的大小，這對於效能敏感的應用程式來說可能是一個缺點。

Axios 與 fetch 在語法、資料處理和相容性方面有顯著差異。 Axios 簡化了 JSON 解析和錯誤處理等常見任務，使其對快速開發具有吸引力。然而，如果您習慣手動處理 JSON 並且不需要支援過時的瀏覽器，那麼 fetch() 在瀏覽器中的本機可用性使其成為強大、輕量級的選擇。

易用性和開發人員體驗

當談到開發者體驗時，Axios 與 fetch 之間的爭論通常圍繞著它們在常見和復雜場景中的易用性展開。以下詳細介紹了兩者在簡單性和靈活性方面的表現。

1. Axios 對於常見用例的簡單性

Axios 旨在讓 HTTP 請求更簡單、更直覺。它提供了一個簡潔且對開發人員友好的 API，易於設置，特別是對於 GET 和 POST 請求等標準用例：

使用 Axios 的簡單 GET 請求範例:

  fetch('https://jsonplaceholder.typicode.com/invalid-endpoint')
    .then(response => {
      if (!response.ok) {
        throw new Error('Server Error');
      }
      return response.json();
    })
    .catch(error => console.error('Error:', error));

僅用幾行程式碼，Axios 就處理了整個請求-回應週期，包括 JSON 解析和錯誤管理。它會自動將回應轉換為 JavaScript 對象，從而輕鬆與資料互動。

2. 邊緣情況下 fetch() 的詳細程度

雖然 fetch() 對於基本請求來說很簡單，但在處理複雜場景（例如設定逾時或管理錯誤）時，它會變得更加冗長：

使用 fetch() 處理超時的範例:

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

在此範例中，管理逾時需要額外的程式碼來設定 AbortController。雖然這使得 fetch() 變得靈活，但與 Axios 內建的超時配置相比，它需要更多的樣板程式碼。

3. Axios 的簡潔文法與 fetch() 的彈性

• Axios 的簡潔語法:
  
  Axios 的語法旨在減少樣板程式碼，從而更輕鬆地用更少的程式碼行處理請求。它會自動轉換 JSON，簡化錯誤處理，並提供請求取消和攔截器等內建功能，從而簡化開發。這使其成為快速且高效的 HTTP 互動至關重要的專案的理想選擇。

• fetch() 的彈性:
  
  另一方面，fetch() 提供了更靈活和模組化的方法。它不會強加任何預設行為，使開發人員能夠完全控制請求和回應週期。雖然這需要更多的手動處理，但它也提供了根據特定需求實施客製化解決方案的靈活性。

性能考慮因素

在Axios 與 fetch 之間進行選擇通常取決於效能需求和專案的特定要求。

1. 基於性能要求的適用性

• 簡單請求：
  
  對於基本資料獲取，fetch() 通常更合適。它是一個輕量級的內建選項，可以減少套件的大小，因為它不依賴外部依賴項。

• 複雜的互動:
  
  Axios 擅長處理需要攔截器、自訂標頭和錯誤處理等功能的複雜場景。這些內建工具可以節省大型應用程式的開發時間，使 Axios 成為企業級專案的更好選擇。

2. 網路延遲與回應處理

• 網路延遲:
  
  Axios 和 fetch() 之間的原始速度沒有顯著差異，因為兩者都依賴類似的底層技術。 Axios 由於其功能可能會帶來輕微的開銷，但這對於大多數用例來說通常可以忽略不計。

• 回應處理:
  
  axios 簡化了 JSON 處理，自動解析回應，而 fetch() 需要使用 response.json() 手動解析。這使得 Axios 在 JSON 密集型應用程式的開發時間方面稍快。

3. 選擇 Axios 與 fetch() 的場景

• 當 Axios 過度殺戮時:
  
  如果您的專案涉及簡單的請求和最少的資料處理，那麼 fetch() 的原生、簡潔的方法是理想的選擇。對於輕量級應用程序，避免 Axios 的額外重量。

• 當 fetch() 需要幫助時:
  
  對於需要集中錯誤處理、重試或複雜標頭的應用程序，fetch() 可能會變得非常麻煩。在這些情況下，Axios 提供了更簡化的解決方案，而無需大量自訂程式碼。

透過了解這些效能方面，您可以根據專案的複雜性和規模在 Axios 與 fetch 之間做出選擇。

Axios 與 Fetch 的功能比較

為了充分了解Axios 與 fetch 的優缺點，讓我們透過實際範例來探索它們的主要功能：

1. 自動資料轉換

Axios 自動處理 JSON 轉換，轉換請求負載和回應，無需額外程式碼：

Axios 範例（自動 JSON 處理）:

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

在 Axios 中，請求和回應中都會自動解析 JSON，簡化了流程。

fetch() 範例（手動 JSON 解析）:

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

使用 fetch() 時，您需要在傳送資料之前手動 JSON.stringify() 資料並呼叫 response.json() 來解析回應，這會增加一點複雜性。

2. 超時管理

處理逾時對於 HTTP 請求來說可能是一個挑戰。 Axios 透過內建超時屬性讓事情變得簡單：

Axios 範例（內建逾時）:

  axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'Post Title',
    body: 'Post Content',
  })
  .then(response => console.log(response.data));

在 Axios 中，設定超時就像添加超時配置一樣簡單。

fetch() 範例（使用 AbortController 實作逾時）:

  fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      title: 'Post Title',
      body: 'Post Content'
    })
  })
  .then(response => response.json())
  .then(data => console.log(data));

使用 fetch()，超時需要使用 AbortController 執行額外的步驟，這使得與 Axios 相比不太簡單。

3. 錯誤處理

錯誤處理是 Axios 憑藉內建分類而大放異彩的另一個領域：

Axios 範例（錯誤分類）:

  fetch('https://jsonplaceholder.typicode.com/invalid-endpoint')
    .then(response => {
      if (!response.ok) {
        throw new Error('Server Error');
      }
      return response.json();
    })
    .catch(error => console.error('Error:', error));

axios 將錯誤分為回應、請求、未知，方便偵錯。

fetch() 範例（手動錯誤處理）:

npm install whatwg-fetch --save

使用 fetch() 時，需要使用 response.ok 手動檢查伺服器錯誤，因為它預設不會拒絕非 2xx 狀態碼的承諾。

4. HTTP 攔截器

攔截器允許全域處理請求和回應，這是 Axios 原生支援的：

axios 範例（全域請求攔截器）:

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

Axios 讓在發送請求之前添加標頭或日誌訊息變得簡單。

fetch() 範例（自訂攔截器實作）:

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

fetch() 沒有本機攔截器，但您可以透過覆寫全域 fetch 方法來模仿該行為。

進階用例

1. 同時請求

處理多個請求在 Web 開發中很常見，Axios 和 fetch() 都有自己的方式：

Axios 範例（使用 axios.all 進行同時要求）:

  axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'Post Title',
    body: 'Post Content',
  })
  .then(response => console.log(response.data));

Axios 提供了 axios.all() 和 axios.spread() 來乾淨地處理並發請求。

fetch() 範例（使用 Promise.all 的同時要求）:

  fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      title: 'Post Title',
      body: 'Post Content'
    })
  })
  .then(response => response.json())
  .then(data => console.log(data));

使用 fetch()，您可以使用 Promise.all() 來處理多個請求，需要手動解析每個回應。

2. 檔案上傳與進度指示器

由於內建支持，檔案上傳和顯示進度在 Axios 中更容易：

Axios 範例（檔案上傳進度指示器）:

  fetch('https://jsonplaceholder.typicode.com/invalid-endpoint')
    .then(response => {
      if (!response.ok) {
        throw new Error('Server Error');
      }
      return response.json();
    })
    .catch(error => console.error('Error:', error));

Axios 的 onUploadProgress 回呼非常適合即時顯示上傳進度。

fetch() 範例（檔案上傳和下載進度）:

npm install whatwg-fetch --save

使用 fetch()，實作檔案進度需要手動處理 ReadableStream，這增加了複雜性。

現實場景：何時使用 Axios 與 fetch()

在Axios 與 fetch 之間做出選擇很大程度上取決於您專案的特定需求。以下是每種工具最有效的時間：

1. 各有千秋的用例

• 小型專案： 如果您正在建立一個需要基本資料取得的簡單項目，那麼 fetch() 通常是更好的選擇。它是輕量級的，內建於瀏覽器中，並且避免添加外部相依性。這使得它非常適合簡單的任務，例如從 API 取得 JSON 資料或提交表單。

範例：只需要發出一些 API 請求的個人部落格或小型網站就可以使用 fetch()，而無需使用更大的函式庫的開銷。

• 企業應用： 在大型專案中，Axios 具有明顯的優勢。其內建功能（如攔截器、全域配置和自動資料轉換）簡化了程式碼維護和錯誤處理。這使得 Axios 更適合複雜的應用程序，其中結構化和一致的 HTTP 處理至關重要。

範例：與多個 API 互動並需要強大的錯誤處理功能的財務儀表板將受益於 Axios 的簡化設定和功能。

2. 成本效益分析

在Axios 與 fetch 之間進行選擇通常需要評估 Axios 的優點是否值得額外的依賴。對於小型項目， fetch() 通常就足夠了，可以最大限度地減少套件大小並簡化設定。然而，在可維護性、程式碼一致性和進階功能很重要的企業應用程式中，Axios 的優勢可能超過新增庫的成本。

處理 CORS

1. 什麼是 CORS？

跨來源資源共享（CORS）是一項安全功能，允許伺服器指定誰可以存取其資源。當向不同的網域發出請求時，CORS 策略可確保您的應用程式能夠安全地取得資料。

• Axios 和 fetch() 處理 CORS 請求的方式類似，因為它們都依賴瀏覽器的 CORS 策略。一個常見的錯誤是在請求中新增 Access-Control-Allow-Origin 標頭 - 該標頭只能由伺服器設定。正確配置的伺服器將在回應中包含此標頭以指示允許的來源。

2. 正確的 CORS 設定範例

Axios 範例:

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

fetch() 範例:

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

在這兩種情況下，請確保伺服器已配置為允許跨來源請求。

效能優化技巧

最佳化 Axios 和 fetch() 有助於提高應用程式效能，尤其是在處理大量資料或頻繁發出請求時。

1. 快取

• Axios：使用像 axios-cache-adapter 這樣的快取庫來快取回應並減少冗餘的網路請求。
• fetch()：使用 localStorage 或 sessionStorage API 實作簡單的快取機制來儲存所取得的資料。

2. 響應處理

有效處理回應以減少網路負載：

• axios：使用攔截器全域管理回應，僅解析相關資料。
• fetch()：透過使用 URL 參數或查詢字串來限制伺服器回應，避免取得不必要的資料。

3. 最小化網路負載

• Axios：使用 CancelToken 功能取消不再需要的請求，減少網路負載的浪費。
• fetch()：利用AbortController終止不需要的請求。

透過了解何時使用Axios 與 fetch 並應用這些最佳化技術，您可以確保您的專案順利運行，同時最大限度地減少網路影響。

結論

在Axios 與 fetch 之間進行選擇最終取決於專案的複雜性和要求。 Axios 非常適合大型企業級應用程序，其中結構化程式碼、集中式錯誤處理和攔截器等內建功能可以簡化開發。另一方面，fetch() 非常適合需要簡單、輕量級資料取得而無需額外庫開銷的小型專案。對於優先考慮以最少的設定快速實施的開發人員來說，Axios 提供了便利，而那些尋求完全控制和靈活性的開發人員將欣賞 fetch()。如果您正在考慮替代方案，請探索 React Query 與 Axios 的比較，以了解更高級的資料擷取策略。您的選擇應符合應用程式的規模和需求，平衡簡單性、效能和程式碼可維護性。

以上是Axios 與 Fetch：您應該為您的專案選擇哪一個的詳細內容。更多資訊請關注PHP中文網其他相關文章！