如何在node.js，deno和bun中使用fetch api

本文探討如何在 Node.js、Deno 和 Bun 中使用 Fetch API。

核心要點

• 現代JavaScript 環境中的Fetch API： 本文討論如何在各種JavaScript 環境（如Node.js、Deno 和Bun）中使用Fetch API，Fetch API 是XMLHttpRequest 的一種現代且更簡單的替代方案，重點介紹其基於Promise 的結構和易用性。
• 客戶端與服務器端Fetch 使用差異： 雖然Fetch API 在客戶端和服務器環境中提供一致的接口，但本文重點介紹了使用限制方面的關鍵差異，例如客戶端上的CORS 和CSP，以及服務器端上的限制較少但可能存在第三方API 限制。
• 有效的Fetch 請求策略： 本文強調了高效Fetch 請求策略的重要性，例如對並發請求使用Promise.allSettled，以及使用AbortController 管理超時，以確保Web 應用程序的性能優化和更好的錯誤處理。

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 可能：

• 需要某種使用密鑰或 OAuth 的身份驗證或授權
• 具有最大請求閾值，例如每分鐘不超過一次調用，或者
• 對訪問收取商業費用

您可以使用服務器端 fetch() 調用來代理客戶端請求，以便您可以避免 CORS 和 CSP 問題。也就是說，請記住做一個有責任心的網絡公民，不要用成千上萬的請求轟炸服務，這可能會導致它們崩潰！

自定義 Fetch 請求

上面的示例從 URI https://www.php.cn/link/9313f5e96e48503b676b16e2e0d41455 請求數據。在表面之下，JavaScript 創建一個 Request 對象，該對象表示該請求的完整詳細信息，例如方法、標頭、正文等等。

fetch() 接受兩個參數：

• 資源——字符串或 URL 對象，以及
• 可選的 options 參數，其中包含其他請求設置

例如：

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中文網其他相關文章！