本文探討如何在 Node.js、Deno 和 Bun 中使用 Fetch API。
核心要點
Fetch API 與 XMLHttpRequest
通過 HTTP 請求獲取數據是 Web 應用程序的基本活動。您可能在瀏覽器中進行過此類調用，但 Fetch API 在 Node.js、Deno 和 Bun 中都得到原生支持。
在瀏覽器中，您可能需要從服務器請求信息，以便在不進行全屏刷新的情況下顯示信息。這通常被稱為 Ajax 請求或單頁應用程序 (SPA)。在 1999 年到 2015 年之間，XMLHttpRequest 是唯一的選擇——如果您想顯示文件上傳進度，仍然如此。 XMLHttpRequest 是一個相當笨拙的基於回調的 API，但它允許進行細粒度的控制，並且，儘管名稱如此，它將處理 XML 以外的格式的響應——例如文本、二進制、JSON 和 HTML。
瀏覽器從 2015 年開始實現 Fetch API。它是一個比 XMLHttpRequest 更簡單、更容易、更一致、基於 Promise 的替代方案。
您的服務器端代碼也可能需要發出 HTTP 請求——通常是調用其他服務器上的 API。從它們的第一個版本開始，Deno 和 Bun 運行時就有效地複制了瀏覽器的 Fetch API，以便類似的代碼可以在客戶端和服務器端運行。 Node.js 需要一個第三方模塊，例如 node-fetch 或 axios，直到 2022 年 2 月，版本 18 添加了標準的 Fetch API。它仍然被認為是實驗性的，但是您現在可以在大多數情況下使用相同的代碼在任何地方使用 fetch()。
基本的 Fetch 示例
這個簡單的示例從 URI 獲取響應數據：
const response = await fetch('https://www.php.cn/link/9313f5e96e48503b676b16e2e0d41455');fetch() 調用返回一個 Promise，該 Promise 解析為一個 Response 對象，提供有關結果的信息。您可以使用基於 Promise 的 .json() 方法將 HTTP 響應正文解析為 JavaScript 對象：
const response = await fetch('https://www.php.cn/link/9313f5e96e48503b676b16e2e0d41455');客戶端與服務器端 Fetch
API 在各個平台上可能相同，但瀏覽器在進行客戶端 fetch() 請求時會強制執行限制：
跨源資源共享 (CORS)
客戶端 JavaScript 只能與其自身域內的 API 端點通信。從https://www.php.cn/link/7d95c1c55d84afc81845d9fb25c0cc0c 加載的腳本可以調用https://www.php.cn/link/a9db15913897019149a2807337f4a0f8 上的任何服務，例如https://www.php.cn/link/a9db15913897019149a2807337f4a0f8api/ 或https://www.php.cn/link/a9db15913897019149a2807337f4a0f8data/。
無法調用 https://www.php.cn/link/246e28f16369b577bd206cfa3b36295c 上的服務——除非該服務器通過設置 HTTP Access-Control-Allow-Origin 頭允許訪問。
內容安全策略 (CSP)
您的網站/應用程序可以設置 Content-Security-Policy HTTP 頭或元標記來控制頁面中允許的資產。如果意外或惡意注入腳本、iframe、字體、圖像、視頻等，它可以防止這種情況。例如，設置 default-src 'self' 會阻止 fetch() 請求其自身域之外的數據（XMLHttpRequest、WebSocket、服務器發送的事件和信標也受到限制）。
Node.js、Deno 和 Bun 中的服務器端 Fetch API 調用限制較少，您可以從任何服務器請求數據。也就是說，第三方 API 可能：
您可以使用服務器端 fetch() 調用來代理客戶端請求，以便您可以避免 CORS 和 CSP 問題。也就是說，請記住做一個有責任心的網絡公民，不要用成千上萬的請求轟炸服務，這可能會導致它們崩潰！
自定義 Fetch 請求
上面的示例從 URI https://www.php.cn/link/9313f5e96e48503b676b16e2e0d41455 請求數據。在表面之下，JavaScript 創建一個 Request 對象，該對象表示該請求的完整詳細信息，例如方法、標頭、正文等等。
fetch() 接受兩個參數：
例如：
const data = await response.json(); // 使用 data 对象执行一些操作 // ...
options 對象可以在 Node.js 或客戶端代碼中設置以下屬性：
| 属性 | 值 |
|---|---|
| method | GET（默认）、POST、PUT、PATCH、DELETE 或 HEAD |
| headers | 字符串或 Headers 对象 |
| body | 可以是字符串、JSON、blob 等 |
| mode | same-origin、no-cors 或 cors |
| credentials | omit、same-origin 或 include |
| redirect | follow、error 或 manual |
| referrer | 引荐 URL |
| integrity | 子资源完整性哈希 |
| signal | AbortSignal 对象，用于取消请求 |
您可以選擇創建一個 Request 對象並將其傳遞給 fetch()。如果您可以在預先定義 API 端點或想要發送一系列類似的請求時，這可能很實用：
const response = await fetch('https://www.php.cn/link/9313f5e96e48503b676b16e2e0d41455');(以下內容略去，因為篇幅過長，核心內容已在上面概括。 如果需要，可以繼續處理剩餘部分，例如HTTP Headers處理，Promise處理，響應分析，請求中止等。)
總結
除非您使用的是舊版本的 Node.js（17 或更低版本），否則 Fetch API 在服務器和客戶端的 JavaScript 中都可用。它靈活、易於使用，並且在所有運行時中都保持一致。只有當您需要更高級的功能（例如緩存、重試或文件處理）時，才需要第三方模塊。
以上是如何在node.js，deno和bun中使用fetch api的詳細內容。更多資訊請關注PHP中文網其他相關文章！
