什么是Fetch API
Fetch API 是一種現代的 JavaScript API，用于進行網絡請求和處理響應數據。它提供了一種更簡單和更靈活的方式來執行網絡請求，取代了傳統的 XMLHttpRequest（XHR）。
Fetch API 具有以下特點：
-
Promise 風格的 API： Fetch API 使用 Promise 對象進行異步操作的處理。這使得處理異步操作變得更加直觀和易于管理。
-
更清晰的語法： Fetch API 的語法更加清晰和簡潔，可以通過鏈式調用來定義請求的各個參數。
-
支持請求和響應對象： Fetch API 允許您創建請求對象并設置請求頭、請求方法、請求體等參數。同時，它也提供了處理響應的功能，可以獲取響應頭、響應狀態等信息。
-
內置 JSON 解析： 在 Fetch API 中，處理 JSON 數據更加方便。默認情況下，響應數據會被自動解析為 JSON 對象。
-
跨域請求支持： 與 XMLHttpRequest 一樣，Fetch API 也可以用于進行跨域請求。但是要注意，默認情況下，瀏覽器不會發送跨域請求的身份驗證憑據（如 Cookie）。
以下是使用 Fetch API 進行 GET 請求的示例：
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(data); // 處理響應數據}).catch(error => {console.error('Fetch Error:', error);});
以上代碼中，fetch 函數發送了一個 GET 請求到指定的 URL，然后使用 Promise 的鏈式調用處理響應數據。在 then 方法中，您可以根據需要進行響應數據的解析和處理，同時使用 catch 方法來捕獲請求和解析過程中的錯誤。
需要注意的是，Fetch API 在某些方面與傳統的 XMLHttpRequest 有所不同，例如錯誤處理和請求的默認設置。在實際使用中，您可以根據具體需求選擇適合的網絡請求工具。
Fetch API 的主要 API
Fetch API 提供了一組用于進行網絡請求和處理響應的方法和屬性。以下是一些 Fetch API 的主要 API：
- fetch() 方法：
- 用于發送網絡請求并返回一個 Promise 對象，該 Promise 在請求完成后會解析為 Response 對象。
fetch(url, options);
-
Response 對象：
- 表示一個 HTTP 響應，它包含響應頭、響應狀態、響應數據等信息。
-
Request 對象：
- 表示一個 HTTP 請求，可以用于自定義請求頭、請求方法等。
-
Headers 對象：
- 用于操作和管理請求和響應的頭部信息。
-
RequestInit 參數對象：
- 在
fetch()方法中，可以通過這個對象設置請求的各種選項，如請求方法、請求頭、請求體等。
- 在
-
Body 對象：
- 用于操作請求和響應的數據體（請求體和響應體），可以通過
.json()、.text()等方法解析響應數據。
- 用于操作請求和響應的數據體（請求體和響應體），可以通過
-
Response 方法和屬性：
.json()：返回一個 Promise，解析響應數據為 JSON 對象。.text()：返回一個 Promise，解析響應數據為文本字符串。.blob()：返回一個 Promise，解析響應數據為二進制 Blob 對象。.arrayBuffer()：返回一個 Promise，解析響應數據為 ArrayBuffer 對象。.ok：一個只讀屬性，表示響應是否成功。.status：一個只讀屬性，表示響應的狀態碼。
-
CORS 相關選項：
mode：設置請求模式，如"cors"（跨域請求）、"same-origin"（同源請求）、"no-cors"（不允許跨域請求）。credentials：設置請求是否攜帶跨域請求的憑據，如"include"、"same-origin"、"omit"。
-
AbortController 和 AbortSignal：
- 用于實現請求的取消功能，通過
AbortController可以創建一個控制器，然后將其與請求關聯，通過AbortSignal可以監聽請求的取消事件。
- 用于實現請求的取消功能，通過
這些是 Fetch API 中的一些核心方法、對象和屬性。
與axios區別
fetch 和 axios 都是 JavaScript 中用于進行網絡請求的工具，但它們有一些不同之處。以下是它們之間的一些主要區別：
-
API 風格：
fetch是瀏覽器內置的原生 API，用于進行網絡請求。它返回 Promise 對象，采用 Promise 風格的異步編程。axios是一個基于 Promise 的第三方庫，提供了更高級的 API，可以在瀏覽器和 Node.js 環境中使用。
-
全局性：
fetch是瀏覽器的全局對象，可直接在瀏覽器環境中使用。axios需要通過導入庫后使用，可以在瀏覽器和 Node.js 環境中使用。
-
語法和配置：
fetch使用基于方法的鏈式調用，如.then()，并提供了一組參數來配置請求。axios使用更直觀的 API，使用.then()或async/await來處理異步，提供了更豐富的配置選項。
-
請求和響應處理：
fetch需要使用.json()方法來解析 JSON 響應數據，不同類型的響應需要不同的解析方式。axios會自動解析 JSON 響應數據，并提供了可以直接獲取響應數據的 API。
-
錯誤處理：
fetch在響應狀態碼不為 200 時也會返回成功的 Promise，需要手動檢查響應的ok屬性或使用.catch()來處理錯誤。axios會自動根據狀態碼來判斷響應是成功還是失敗，可以通過.catch()來處理錯誤。
-
取消請求：
fetch本身不提供直接的請求取消功能，需要使用AbortController來實現。axios提供了內置的請求取消功能，可以方便地取消正在進行的請求。
-
瀏覽器兼容性：
fetch是現代瀏覽器的標準特性，較舊的瀏覽器可能需要使用 polyfill。axios對于不支持 Promise 的環境需要提供額外的 polyfill。
選擇使用 fetch 還是 axios 取決于您的具體需求和項目環境。fetch 是現代瀏覽器內置的 API，適用于基本的網絡請求，而 axios 提供了更豐富的功能和更友好的 API，適用于更復雜的網絡請求場景。
