Axios 和 Fetch 是在 JavaScript 中進行 HTTP 請求的兩個流行工具，但它們有一些主要的不同之處。以下是詳細比較：
Axios
內建功能：Axios 具備許多內建功能，如自動 JSON 轉換、請求和回應攔截器，以及請求的取消功能。
瀏覽器相容性：它支援舊版瀏覽器，包括 Internet Explorer。
錯誤處理：Axios 自動拒絕 HTTP 錯誤狀態的承諾（例如 404 或 500），簡化了錯誤處理。
請求/回應攔截器：您可以輕鬆地全域修改請求或回應。
取消請求：Axios 提供簡單的方法來取消請求。
Fetch
原生 API：Fetch 是一個原生的網頁 API，這意味著您不需要安裝任何額外的函式庫。
基於承諾：它使用 Promise，但您需要手動檢查回應狀態來處理錯誤。
串流處理：Fetch 支援串流，這對於處理大型回應非常有用。
更多控制：您可以獲得更多請求的控制，但在設置預設值或攔截請求等功能上需要更多的樣板程式碼。
沒有內建的 JSON 支援：您需要在回應物件上調用 .json() 來解析 JSON 數據。
用例
如果您需要一套豐富的功能集，特別是在複雜的應用程式中，請使用 Axios。
對於較簡單的用例或當您想避免使用外部依賴時，請使用 Fetch。
範例用法
Axios:
axios.get('/api/data')
.then(response => console.log(response.data))
.catch(error => console.error(error));// axios
const options = {
url: 'http://localhost/test.htm',
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json;charset=UTF-8'
},
data: {
a: 10,
b: 20
}
};
axios(options)
.then(response => {
console.log(response.status);
});現在將這段程式碼與 fetch() 版本進行比較，兩者將產生相同的結果：
fetch('/api/data')
.then(response => {
if (!response.ok) {
throw new Error('網路回應不正常');
}
return response.json();
})
.then(data => console.log(data))
.catch(error => console.error(error));// fetch()
const url = "https://jsonplaceholder.typicode.com/todos";
const options = {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json;charset=UTF-8",
},
body: JSON.stringify({
a: 10,
b: 20,
}),
};
fetch(url, options)
.then((response) => response.json())
.then((data) => {
console.log(data);
});
請注意：
要傳送數據，fetch() 使用 body 屬性來發送資料，而 Axios 則使用 data 屬性。
fetch() 中的資料透過 JSON.stringify 方法轉換為字串。
Axios 自動轉換伺服器返回的數據，但使用 fetch() 時，您必須調用 response.json 方法來解析數據為 JavaScript 物件。
對於 Axios，伺服器提供的數據回應可以透過 data 物件訪問，而對於 fetch() 方法，最終數據可以命名為任何變數。
結論
兩者各有優勢，選擇通常取決於您的特定需求和偏好。如果您正在構建一個擁有許多 API 交互的大型應用程式，Axios 可能會為您減少一些麻煩，而 Fetch 非常適合簡單的任務。
Axios 提供了簡化大多數 HTTP 通信任務的使用者友好 API。 不過，如果您偏好使用原生瀏覽器功能，您也可以使用 Fetch API 自行實現類似的功能。
正如我們所探討的，使用網頁瀏覽器中提供的 fetch() 方法完全可以複製 Axios 的基本功能。最終決定是否包含客戶端 HTTP 函式庫，取決於您對原生 API 的舒適度以及您特定專案的需求。
更多資訊： https://blog.logrocket.com/axios-vs-fetch-best-http-requests/
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式