Fetch 和 Axios 差異

fetch 是 JavaScript 原生內建的 API，用來發送網絡請求。它是較新版本的標準，為了取代舊的 XMLHttpRequest 而被引入。axios 則是一個第三方庫，專門用來進行網絡請求，基於 Promise 並且有一些更強大的功能和簡化操作的優點。

讓我們來比較一下 fetch 和 axios，以及在不同情況下你可能會想用哪一個。

1. fetch 的優點

• 內建於瀏覽器中：fetch 是瀏覽器內建的 API，這意味著它無需安裝任何第三方庫即可使用，這樣可以減少應用程式的依賴大小。
• Promise-based：fetch 使用 Promise，因此語法簡潔且支持鏈式處理。
• 相對現代：fetch 是為了解決 XMLHttpRequest 的一些痛點設計的，例如更好的語法、更好地支持流處理（例如檔案下載）。

2. axios 的優點

• 更簡單的語法：axios 提供了更簡單和一致的 API，例如自動解析 JSON 回應、錯誤處理，以及直接提供更多的功能。
• 更好的錯誤處理：fetch 不會在 HTTP 請求出現 4xx 或 5xx 錯誤時自動拋出錯誤，而 axios 會自動處理這些錯誤，使錯誤處理更直觀。
• 支持取消請求：axios 支持使用 CancelToken 來取消請求，這在某些情況下（例如用戶操作後中斷 API 請求）很有用。
• 跨瀏覽器兼容性：axios 提供了更好的瀏覽器兼容性，特別是在一些較舊版本的瀏覽器中，fetch 可能不被支持，或者需要 polyfill。
• 自動處理 JSON：axios 自動將回應轉換為 JSON（如果 Content-Type 是 JSON），而 fetch 則需要顯式地調用 response.json()。
• 攜帶 CSRF Token 或 Cookie：axios 自動支持 withCredentials，方便處理跨域請求中的 cookie 或者 CSRF token。

3. 語法比較

使用 fetch：

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
})
  .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:', error));

使用 axios：

axios.post('https://api.example.com/data', { key: 'value' })
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

4. 錯誤處理

• 在 fetch 中，無論是 2xx 還是 4xx/5xx 的 HTTP 狀態碼，Promise 都會被標記為成功（resolved）。你需要手動檢查 response.ok 來處理錯誤。

• axios 則會自動拋出錯誤（rejected Promise）當 HTTP 狀態碼是 4xx 或 5xx。這讓錯誤處理變得更加方便。

5. 自動處理 JSON

• fetch 並不會自動解析 JSON，你需要顯式調用 response.json()。
• axios 會自動處理 JSON 回應，不需要額外解析。

6. 取消請求

• fetch 原生不支持取消請求，必須使用 AbortController 來手動實現，且這需要一些額外的代碼。
• axios 提供內建的 CancelToken 來支持請求取消，語法更簡單。

7. 兼容性

• fetch 不支持 IE 瀏覽器，且在某些舊的瀏覽器上可能需要 polyfill 才能使用。
• axios 可以支持更多的舊版本瀏覽器，並且在跨域請求和處理 cookies 上更加友好。

8. 推薦使用場景

• 如果你希望保持專案簡單，且專案不依賴過多外部庫，並且不需要一些高級功能（如自動錯誤處理、取消請求等），fetch 會是一個很好的選擇。

• 如果你的專案需要更多的功能，且想要簡化語法、加強錯誤處理、處理更複雜的請求場景（如跨域請求、文件上傳等），那麼 axios 會是更推薦的選擇。

總結

• fetch 是內建的，適合簡單的網絡請求和小型項目。
• axios 功能更強大，適合處理複雜的應用需求，並且提供了更好的錯誤處理、跨瀏覽器支持等。

如果你的項目需要處理複雜的請求（如文件上傳、錯誤處理等），推薦使用 axios。但如果你希望保持項目簡單、輕量，並且不需要額外的依賴，那麼 fetch 會是一個不錯的選擇。