如何在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 获取响应数据：

<code class="language-javascript">const response = await fetch('https://www.php.cn/link/9313f5e96e48503b676b16e2e0d41455');</code>

fetch() 调用返回一个 Promise，该 Promise 解析为一个 Response 对象，提供有关结果的信息。您可以使用基于 Promise 的 .json() 方法将 HTTP 响应正文解析为 JavaScript 对象：

<code class="language-javascript">const response = await fetch('https://www.php.cn/link/9313f5e96e48503b676b16e2e0d41455');</code>

客户端与服务器端 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 参数，其中包含其他请求设置

例如：

<code class="language-javascript">const data = await response.json();

// 使用 data 对象执行一些操作
// ...</code>

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 端点或想要发送一系列类似的请求时，这可能很实用：

<code class="language-javascript">const response = await fetch('https://www.php.cn/link/9313f5e96e48503b676b16e2e0d41455');</code>

(以下内容略去，因为篇幅过长，核心内容已在上面概括。 如果需要，可以继续处理剩余部分，例如HTTP Headers处理，Promise处理，响应分析，请求中止等。)

总结

除非您使用的是旧版本的 Node.js（17 或更低版本），否则 Fetch API 在服务器和客户端的 JavaScript 中都可用。它灵活、易于使用，并且在所有运行时中都保持一致。只有当您需要更高级的功能（例如缓存、重试或文件处理）时，才需要第三方模块。

以上是如何在node.js，deno和bun中使用fetch api的详细内容。更多信息请关注PHP中文网其他相关文章！