Fetch API - 基礎

Fetch 是一個基於 Promise 的 API，它提供了一個 JavaScript 介面來非同步訪問或操作請求和響應。與 XMLHttpRequest 相比，它更加強大，使用 Fetch API，我們可以非同步地向伺服器傳送資料或從伺服器請求資料。它還使用 Request 和 Response 物件以及 CORS 和 HTTP 來源標頭概念。

以下是 Fetch API 的關鍵元件：

fetch() 函式 - 要獲取資源或建立請求，Fetch API 使用一個名為 fetch() 的全域性方法。它返回一個 Promise，該 Promise 進一步解析為 Response 物件。
Request 和 Response 物件 - Request 物件用於表示正在傳送的請求，其中包含所有資訊片段，例如 URL、頭部等。而 Response 物件用於表示伺服器返回的響應，包括狀態碼、主體和響應頭部。
Promise - Fetch API 基於 Promise，因為它們非同步處理操作和管理響應流。使用 Promise，我們可以建立一個操作鏈，並可以使用 .then() 和 .catch() 函式處理成功和錯誤。
自定義 - 使用 Fetch API，我們可以透過指定方法、向請求新增主體、設定頭部、處理不同格式的資料等來自定義請求。
CROS - Fetch API 對 CROS（跨源資源共享）提供了良好的支援，允許使用者向不同域發出請求。

Fetch API 的工作原理

Fetch API 用於在 Web 瀏覽器的 Javascript 程式碼中建立 HTTP 請求。因此，我們將透過以下步驟瞭解 Fetch API 如何從傳送請求到接受響應的工作原理：

以下是上述流程圖的分步說明：

步驟 1 - 請求初始化：在客戶端，JavaScript 程式使用 fetch() 函式建立一個請求物件。在這個 fetch() 函式中，我們傳遞要從中獲取資源的資源 URL，以及其他可選的控制，例如頭部、方法、主體等。

步驟 2 - 傳送請求：初始化請求後，Fetch API 使用給定的 URL 將請求傳送到伺服器。如果請求是 GET 請求，則瀏覽器會直接將請求傳送到伺服器。如果請求不是 GET 請求，則瀏覽器會發送一個預檢 OPTIONS 請求，以檢查伺服器是否允許該請求。

步驟 3 - 伺服器處理：伺服器接收到請求後，會處理該請求。它可以對請求執行各種操作，例如處理請求、檢索資料等。

步驟 4 - 生成響應：現在伺服器會生成對給定請求的響應。伺服器響應通常包含狀態碼（例如，200 表示成功，404 表示請求未找到等）、響應頭部和可選的主體。

步驟 5 - 接收響應：Web 瀏覽器從伺服器接收響應。現在 Fetch API 使用 Promise 解析伺服器傳送的響應物件。

步驟 6 - 處理響應：Fetch API 使用基於 Promise 的語法來處理伺服器返回的響應。使用它，我們可以訪問響應狀態、主體和頭部，並對接收到的資料執行操作。

步驟 7 - 解析響應：如果伺服器響應包含文字資料，則 JavaScript 程式使用 .json()、.text()、.blob() 等內建方法來解析和提取響應中的資料。

步驟 8 - 錯誤處理：如果伺服器返回錯誤，則錯誤由 catch() 函式處理。

這些是瞭解 Fetch API 工作流程的基本步驟。這些步驟會根據即時使用的複雜性而有所不同。此外，正如我們所知，Fetch API 是非同步的，因此在等待伺服器的響應時，它不會阻塞其他 Javascript 程式碼的執行。

優點

以下是 Fetch API 的優點：

易於使用 - Fetch API 提供簡單直觀的語法來建立非同步請求。
Promise - Fetch API 使用 Promise，因此它可以輕鬆處理非同步操作。Promise 提供了一種精確的方法來輕鬆處理響應和錯誤。
現代且瀏覽器支援良好 - Fetch API 是現代 Web 標準，它內置於 Web 瀏覽器中，因此幾乎所有現代 Web 瀏覽器和平臺都支援它。這使得 Fetch API 比 XMLHttpRequest 更一致和可預測。
流和漸進式載入 - Fetch API 支援流式響應，這意味著我們可以在響應完全載入之前開始處理響應。這通常對大型檔案很有用。
內建 JSON 支援 - Fetch API 非常有效地支援 JSON 資料。它可以自動解析 JSON 響應並將其轉換為 JavaScript 物件。
與其他 API 整合 - 由於 Fetch API 的行為，它可以輕鬆地與其他 API（如 Service Worker API、Cache API 等）整合。
更多控制 - 使用 Fetch API，我們可以藉助其他引數（如頭部、方法、主體等）輕鬆自定義請求。

缺點

以下是 Fetch API 的缺點：

Web 瀏覽器支援有限 - Fetch API 幾乎受所有現代 Web 瀏覽器支援，但不受舊版 Web 瀏覽器支援。如果您使用的是舊版 Web 瀏覽器，則必須使用舊方法，例如 XMLHttpRequest 等。
請求取消 - Fetch API 沒有提供任何內建方法來取消已發起的請求。
超時 - Fetch API 沒有提供任何指定或內建方法來使請求超時。如果要為請求強制執行超時，則必須手動執行。
錯誤處理 - Fetch API 提供有限的錯誤處理方法。它將除 2xx 之外的任何 HTTP 狀態碼視為錯誤。此行為通常適用於某些特定情況，但不適用於所有情況。
檔案載入進度事件 - Fetch API 沒有提供任何用於檔案上傳的內建事件。如果要監控檔案上傳的進度，則需要額外的庫。
跨源限制 - 正如我們所知，Fetch API 遵循瀏覽器的同源策略，因此跨源請求需要伺服器端的額外 CORS 標頭，或受 CORS 預檢檢查的約束，這增加了開發的複雜性。

結論

因此，與傳統的 XMLHttpRequest 等方法相比，Fetch API 更強大、更靈活。它可以輕鬆地與其他 API 和平臺整合。它是 Web 應用程式中使用 HTTP 請求的常用方法。在下一篇文章中，我們將學習 Fetch API 和 XMLHttpRequest 之間的區別。

列印頁面