fetch()

是現代 JavaScript 中最常被使用來處理網路非同步請求的工具，取代老舊的 XMLHttpRequest (XHR) 機制。
當網頁需要從遠端伺服器獲取或傳送資料，而不重新載入整個頁面時，就應該使用 fetch()。
也是AJAX的一種實現方式，至於什麼是AJAX...會再另外寫一篇文章介紹

fetch語法

fetch(resource, options)

resource
字串或 Request 物件。請求的目標URL或一個完整的Request物件。

options
物件選填，用於自訂請求的配置，例如方法、標頭、主體等。

fetch的Promise(承諾) 與 Response(回應)

fetch() 的成功與否，以及如何處理數據，都與 Promise 和它返回的 Response 物件緊密相關。

A. 第一個 Promise (網路連線)
當您呼叫 fetch(url) 時，它返回的第一個 Promise 具有一個特別的行為：

Rejected（失敗）：
只在發生網路級別錯誤時（例如 DNS 解析失敗、瀏覽器離線、CORS 錯誤）才會被拒絕。

Fulfilled（成功）：
即使伺服器返回 404 Not Found 或 500 Internal Server Error 等 HTTP 錯誤狀態碼，這個 Promise 仍會成功，並返回一個 Response 物件。

B. Response 物件
一旦第一個 Promise 成功，您會收到一個 Response 物件。這個物件包含所有的 HTTP 回應資訊，但不包含實際的資料（Body）。

C. 提取實際資料 (第二個 Promise)
要從 Response 中獲取實際的數據，您需要呼叫特定的方法。這些方法本身也會返回一個新的 Promise，因為數據的讀取和解析也是非同步的。

方法 返回類型 說明
response.json() Promise (解析後的 JS 物件) 將回應主體解析為 JavaScript 物件。
response.text() Promise (字串) 將回應主體解析為純文字。
response.blob() Promise (Blob 物件) 用於處理圖片或二進制檔案。
response.formData() Promise (FormData 物件) 用於處理表單資料。

fetch 使用情境

獲取資料 (GET)
從 API 取得使用者列表、商品資訊、新聞文章等資料。

載入外部 JSON 配置文件或純文字檔案。

例如：載入博客網站上的最新文章列表。

提交資料 (POST / PUT)
使用者在表單中輸入資料後，將其提交到伺服器進行儲存（例如註冊新帳號、發布新貼文）。

更新伺服器上的現有資源。

例如：使用者點擊「送出」按鈕將留言內容存入資料庫。

刪除資料 (DELETE)
從伺服器刪除特定的資源，例如刪除購物車中的商品或刪除一篇貼文。

例如：使用者點擊「刪除」按鈕，移除一個文件。

驗證與授權
向伺服器發送憑證（如使用者名稱和密碼）以獲取一個身份驗證令牌（Token）。

在請求中加入授權標頭 (Authorization header)，以存取受保護的資源。