JavaScript – Fetch API 完全手册

如果您想从 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就可以原生支持它，逻辑可以前后端共享，岂不美哉！

感谢阅读！