|
Fetch API 与 XMLHttpRequest 通过 HTTP 请求获取数据是基本的 Web 应用程序活动。您可能在浏览器中进行了此类调用,但 Node.js、Deno 和 Bun 原生支持 Fetch API。 在浏览器中,您可能会向服务器请求信息,以便无需全屏刷新即可显示该信息。这通常称为Ajax 请求或单页应用程序 (SPA)。从 1999 年到 2015 年,XMLHttpRequest是唯一的选择 —如果您想显示文件上传进度,那么它仍然如此。XMLHttpRequest 是一个相当笨重的基于回调的 API,但它允许细粒度的控制,并且尽管名称如此,它仍可以处理 XML 以外的格式的响应,例如文本、二进制、JSON 和 HTML。 浏览器从 2015 年开始就实现了Fetch API。
它是 XMLHttpRequest 的一个更简单、更容易、更一致、基于承诺的替代方案。 Learn to Code with JavaScript 您的服务器端代码可能还想发出 HTTP 请求 - 通常是调用其他服务器上的 API。从第一个版本开始,Deno和Bun运行时都有效地复制了浏览器的 Fetch API,以便类似的代码可 WhatsApp 号码列表以在客户端和服务器上运行。Node.js 需要第三方模块,例如node-fetch或axios,直到 2022 年 2 月,版本 18 添加了标准 Fetch API。它仍然被认为是实验性的,但现在在大多数情况下您可以fetch()在任何地方使用相同的代码。 一个基本的获取示例 这个简单的示例从 URI 获取响应数据: const response = await fetch; 该fetch()调用返回一个承诺,该承诺通过提供有关结果信息的Response 对象进行解析。
您可以使用基于 Promise 的方法将 HTTP 响应正文解析为 JavaScript 对象.json(): const data = await response.json(); /免 CORS 和 CSP 问题。也就是说,请记住成为一个尽责的网络公民,不要用数千个可能导致服务瘫痪的请求轰炸服务! 自定义获取请求 上面的示例从 URI 请求数据。在表面之下,JavaScript 创建一个Request 对象,它表示该请求的完整详细信息,例如方法、标头、正文等。 fetch()接受两个参数: 资源– 字符串或URL对象,以及 带有进一步请求设置的可选选项参数 例如: const response = await fetch { method: 'GET', credentials: 'omit', r); options对象可以在 Node.js 或客户端代码中设置以下属性: 财产 价值观 method GET(默认)、POST、PUT、PATCH、DELETE、 或HEAD headers 字符串或Headers 对象 body 可以是字符串、JSON、blob 等。
|
|