译者 | 陈豪,审校 | 梁策 孙淑娟,如果我们想从 API中获取数据或将数据发布到服务器，必须要用到Fetch API。fetch()为我们提供了一种通过请求和响应发送和接收 HTTP 请求的方法，fetch() 函数是一个全局函数，最常用于与 API 交互。,我们在使用Fetch API获取 URL的数据时，最基本的用法只需要一个参数。当我们运行 Fetch 时，它会有一个返回值：,Res包含一些很有意思的内置函数，如下：,下面是两个例子：,由于res.text()具有可以获取URL 的文本内容的功能，所以可以使用它来获取网站的整个 HTML 。一旦运行 res.text()，我们可以用另一个 then 捕获响应并在控制台记录它：,如果链接不存在或发生错误，响应对象将返回错误。例如，找不到页面将返回 404，或者网关错误将返回 502。,Fetch 的另一个常见用途是获取数组的响应。如果想从 JSON 格式的 API 中获取响应，我们可以使用 res.json()。例如，以下代码将从 URL 返回一个 JSON 对象，假设 URL 正在发送有效的 JSON：,由于 Fetch 可以发送和接收 HTTP 请求，当我们想要使用它获取 URL数据的时候，还可以带一些选项，即 fetch(URL, { options })。如果你以前使用过 HTTP 请求就会对这很熟悉了。所有可用选项的示例，如下所示：,以下是这些选项的具体含义：,当我们使用 Fetch 时，它会转到我们定义的 URL，收集信息并将响应返回。 这不是即时的，因为加载 URL 并将其取回需要时间。如果我们单独运行 Fetch，控制台日志将返回一个 Promise，而不是来自我们想要的 URL 的响应：,在fetch() 函数运行时，JavaScript并不会等待响应。如果我们想要访问响应，我们必须明确告诉 JavaScript 需要等待。,等待 fetch() 有两种方法：,从fetch()调用中访问数据的一种方法是将其链接到Fetch上，从而允许我们从URL访问响应。fetch()的内容可以在then()回调函数内操作，但不能在回调函数外操作。例如：,如果我们想在 then 函数之外使用 fetch() 的内容，则必须使用 await。,等待Fetch的另一种方法是使用 await 关键字。大多数的浏览器都支持Top-level awaits,如果你使用的是Node.JS 14.8 之前的版本，你需要将await相关的代码打包到异步函数中。,如果我们使用 await，可以在函数或代码的任何地方使用它来获取 API 的响应，并在其上使用任何响应函数，例如 text() 或 json()。 例如：,本文中，我们介绍了 Fetch 的工作原理、如何通过 fetch() 发送不同的选项，以及如何使用 JavaScript 中的异步概念来等待响应。 fetch() 是 JavaScript 中的一个强大工具，经常在一些优秀项目中发挥重要作用。,陈豪，51CTO社区编辑，具有6年工作经验的高级系统工程师。擅长技能有Linux内嵌汇编语言，Python，C，C++，Java，Linux内核分析，智能机器人软件设计等。,原文标题：How Fetch Works in JavaScript，作者：Johnny Simpson
© 版权声明
文章版权归作者所有，未经允许请勿转载。
">