Fetch/XHR 介紹

Fetch 和 XHR（XMLHttpRequest） 是兩種用於在網頁中進行非同步請求的 API。它們可以讓瀏覽器向伺服器發送請求並獲取數據，而不必重新加載頁面。這是網頁動態交互的基礎，例如 AJAX 技術。

1. XMLHttpRequest (XHR)

XMLHttpRequest (XHR) 是一個較早的 API，用來在不重新加載頁面的情況下，從伺服器獲取數據或將數據發送到伺服器。儘管名字中包含 “XML”，XHR 可以處理多種格式的數據，包括 JSON、XML、HTML 和純文本。

基本用法： var xhr = new XMLHttpRequest(); xhr.open('GET', '/some-endpoint', true); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText); // 處理響應 } }; xhr.send();

特點：

• 支援不同類型的請求：GET、POST 等。
• 處理多種響應格式。
• 需要處理 readyState 和狀態碼 (status) 來檢查請求是否成功完成。
• API 相對較繁瑣，需要多個步驟來完成基本請求。

2. Fetch API

Fetch API 是一個現代化的、承諾 (Promise) 為基礎的 API，用來替代 XMLHttpRequest，讓請求流程更加簡單和清晰。

基本用法： fetch('/some-endpoint') .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); // 或 response.text() 等 }) .then(data => { console.log(data); // 處理響應 }) .catch(error => { console.error('Fetch error:', error); });

特點：

• 基於 Promise，讓處理異步代碼更加簡潔。
• 支援同樣的請求方法如 GET、POST、PUT 等。
• 內建支持 JSON 處理，常用於處理 API 數據。
• 不需要手動檢查 readyState 或處理回調，代碼更清晰。

比較

• 易用性：Fetch 比 XHR 更加簡單，因為它基於 Promise，處理鏈式調用和異常變得更方便。
• 兼容性：XHR 與所有主要的瀏覽器都兼容，而 Fetch 是新引入的，雖然現代瀏覽器都支援，但一些舊版的瀏覽器可能需要 polyfill。
• 錯誤處理：Fetch 只會對網絡錯誤拋出異常（例如無法連接伺服器）。對於 HTTP 錯誤（如 404 或 500），Fetch 仍然會被視為成功完成，需要手動檢查響應狀態。

通常情況下，Fetch 是首選，因為它更簡潔、現代化，並且與 Promise 和 async/await 兼容，方便處理異步工作流。

本文由 ChatGPT 生成