JavaScript - Fetch API 完全手册

myzbx 2025-01-01 21:41 12 浏览

如果您想从 API 加载数据，那么 fetch API 是在 JavaScript 中执行此操作的最佳方式。您不需要引入任何第三方库，就可以直接使用方便的fetch。

像上图所示，绝大多数浏览器已经原生支持Fetch，所以您可以放心使用。Node.js 对它的支持也正在路上，Fetch 已经作为 Node v17 中的实验性功能提供，你可以使用 node app.js --experimental-fetch 来开启它。

Fetch API 的基本使用

Fetch API 是基于Promise的，所以如果你不了解Promise, 最好先学习一下Promise。

调用 fetch API 的最简单方法是将 URL 传递给 fetch 函数。

这将返回一个包含响应数据的Promise。此响应数据包含状态属性以及将原始响应数据转换为 JSON、文本或其他格式的方法。

上面显示res.json() 是在我们的响应中调用 json() 方法，这个方法会返回另外一个 promise，该 promise 从我们的响应中解析 JSON 数据。

我们可以在后面的then方法中获取到最终需要的JSON数据对象。

如果您从 JSON api 获取数据，这就是大多数获取请求的样子。我们首先获取 URL，然后将响应转换为 JSON，最后使用最终 .then 中的数据。

如果使用async/await语法，可能会更简单点。

Fetch 参数

这将涵盖您的一些 fetch 用途，但通常您需要传递其他选项来进行 fetch 配置。 fetch 函数采用第二个选项对象参数，其中包含大量潜在选项。

method

最常用的选项是方法选项。此选项允许您设置要使用的 HTTP 动词（GET、POST、PUT、DELETE 等）。

body

如果您正在修改方法，那么您可能需要将数据与您的请求一起传递。这就是 body 选项的用武之地。body 不接受对象，因此如果您想将 JSON 传递给您的 API，您必须首先将其转换为字符串。

headers

现在，执行上述操作可能看起来像是将 JSON 传递给 API 所需要做的一切，但这实际上是行不通的。原因是您需要设置正确的标头来告诉您的 API 您正在发送 JSON 信息。此标头选项允许您设置所需的任何 HTTP 标头。

上面这组代码是将 JSON 传递给 API 所需要做的一切。

signal

最后一个要说的的是信号选项。这个选项接受一个 AbortSignal，它可以用来中止一个获取请求。

正如您从代码中看到的那样，这比其他选项要复杂一些。首先你必须创建一个新的 AbortController 这个控制器有一个信号属性，这是你传递给signal选项的。控制器还有一个 abort 方法，当调用该方法时，将使用相关信号中止获取请求。这将导致 fetch Promise以 AbortError Reject异常。

这些选项应该是可以cover你90%左右的用例。具体还有其他一些不常用的可以去查看官网文档。

总结：

fetch API 是一个功能强大的工具，易于上手，它包含适用于每个可以想象的用例的许多高级选项。最重要的是，马上node.js就可以原生支持它，逻辑可以前后端共享，岂不美哉！

感谢阅读！

HTML API

上一篇：传统ISV进场，MolyApp的HTML5生意是让商户、明星商城快速构建线上营销和支付渠道
下一篇：在JavaScript中使用URL API

JavaScript - Fetch API 完全手册

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

用上Vue3，你真的变了吗?（vue3 key）

说下你的vue项目的目录结构，该怎么划分?

8.7k star，一款超炫酷的动态可视化大屏项目

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

20个免费音乐音效下载网站，无版权素材商业影片也可用

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331

谷歌SEO:外贸电商网站On-page SEO优化实战「附案例」