AJAX中有兩套原生的API，一個是XHR(XMLHttpRequest)，一個是Fetch API

axios是第三方庫，在瀏覽器環境中使用的是XHR

umi-request也是第三方庫，在瀏覽器環境中使用的是Fetch

在 AJAX（Asynchronous JavaScript and XML）中，原生的 API 主要有兩種：XMLHttpRequest（簡稱 XHR）和Fetch API。這兩者都用于在客戶端與服務器之間進行異步通信，但它們有一些關鍵的區別，尤其是在使用方式、功能和靈活性上。以下是兩者的詳細比較和作用。

1.XMLHttpRequest（XHR）

XMLHttpRequest 是最早用于在瀏覽器中執行異步 HTTP 請求的 API，通常用于實現 AJAX 請求。它自 1999 年起就已被引入，長期以來是進行異步請求的標準方法。

主要特點：

- 語法復雜：使用起來相對較復雜，需要更多的配置和回調函數來處理請求的各個階段（如發送請求、接收響應等）。

- 回調函數：它使用回調函數來處理異步響應，需要監聽onreadystatechange 事件，或使用onload、onerror 等事件處理程序來處理響應。

- 支持的請求類型：XMLHttpRequest 支持多種 HTTP 請求方法（如GET、POST、PUT、DELETE 等）。

- 支持同步和異步請求：可以選擇同步（阻塞）或異步（非阻塞）請求，但同步請求會導致瀏覽器凍結，影響用戶體驗，因此通常不推薦使用同步請求。

- 支持跨域請求：通過XMLHttpRequest 進行跨域請求時，需要使用 CORS（跨域資源共享）機制。

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true); // true表示異步請求xhr.onreadystatechange = function () {if (xhr.readyState === XMLHttpRequest.DONE) {if (xhr.status === 200) {console.log("Response:", xhr.responseText); // 處理響應數據} else {console.error("Request failed with status:", xhr.status);}}
};xhr.send(); // 發送請求

優缺點：

- 優點：

- 支持所有主流瀏覽器。

- 可以處理復雜的請求場景。

- 缺點：

- 使用起來較為復雜，需要手動管理事件和回調。

- 不支持 Promise，需要額外處理異步操作。

---

2.Fetch API

Fetch API 是現代瀏覽器中新加入的用于發起網絡請求的 API，相比XMLHttpRequest，Fetch 提供了更簡潔、更強大的語法，并且它基于 Promise，支持更直觀的異步操作。

主要特點：

- 基于 Promise：Fetch API 基于 Promise，這使得異步操作更加簡潔和靈活。可以通過then() 和catch() 方法處理請求結果和錯誤。

- 默認異步：Fetch 請求默認是異步的，因此不會阻塞線程，也沒有必要手動設置異步標志。

- 不支持同步請求：與XMLHttpRequest 不同，Fetch 不支持同步請求，始終是異步的。

- 響應處理：Fetch 返回的響應對象提供了更豐富的方法來處理響應數據，例如可以方便地將響應解析為 JSON、文本、二進制數據等。

- 支持 CORS：Fetch 與XMLHttpRequest 一樣，支持跨域請求，但其跨域配置更加簡潔。

示例代碼：

fetch("https://api.example.com/data").then(response => {if (!response.ok) {throw new Error('Network response was not ok');}return response.json(); // 解析為 JSON}).then(data => {console.log("Response data:", data); // 處理數據}).catch(error => {console.error("There was a problem with the fetch operation:", error);});

優缺點：

- 優點：

- 基于 Promise，代碼更加簡潔、易于理解和維護。

- 更好地支持現代 JavaScript 的異步操作（如 async/await）。

- 對于響應處理（如 JSON 解析）更加方便和靈活。

- 缺點：

- 不支持較舊的瀏覽器（如 IE）。不過可以通過 polyfill 進行兼容。

- 需要手動處理 HTTP 錯誤（fetch 僅在網絡失敗時拋出錯誤，HTTP 錯誤狀態（如 404、500）不會拋出異常）。

---

3. 關鍵區別

特性	XMLHttpRequest	Fetch API
API 風格	基于事件回調和狀態變化	基于 Promise，支持 then 和 catch 語法
默認異步	支持同步和異步（不推薦使用同步）	始終為異步
響應處理	使用 xhr.responseText，需要手動解析數據	支持直接解析為 JSON、文本、二進制等
支持的功能	需要手動設置跨域（CORS）、狀態檢查等	自動處理跨域，默認遵循 CORS 標準
錯誤處理	需要監聽 onerror 或 onreadystatechange 事件	只會在網絡錯誤時拋出異常，需要手動處理 HTTP 錯誤
支持的瀏覽器	廣泛支持（包括較舊的瀏覽器）	主要支持現代瀏覽器，需要 polyfill 來兼容舊版瀏覽器
同步請求	支持（但不推薦）	不支持同步請求

功能點：

4. 總結

-XMLHttpRequest 是傳統的 API，適合處理兼容性要求較高的項目，但使用起來較為繁瑣，特別是處理回調和異步操作時。

-Fetch API 是現代的、基于 Promise 的 API，提供了更簡潔的語法，易于使用，尤其是與async/await 結合使用時，代碼更加清晰和可維護。不過，它不支持同步請求，并且需要現代瀏覽器支持。

因此，現代 Web 開發中，Fetch API 更為推薦，特別是當你的目標瀏覽器支持它時。如果需要兼容老舊瀏覽器，可能仍然需要使用XMLHttpRequest 或結合使用 polyfill 來實現。