本文探讨如何在 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中文网其他相关文章！
