 API 允许我们创建一个 HTTP 请求，以便我们在 中完成许多事情——比如从 API 检索数据、将数据发布到服务器，甚至只是获取网页的全部内容。此 HTTP 请求将从提供的 URL 中异步检索数据，并生成某种 HTTP 响应。让我们看看它是如何工作的。 fetch Javascript   函数是一个全局函数，最常用于与 API 交互。如果您不熟悉它，那么您并不孤单 - 所以让我们来看看 是如何工作的。 fetch() fetch() 在 Javascript 中使用 fetch  fetch 最基本的用法需要一个参数——我们想要获取的 URL。由于 生成 HTTP 请求，我们总是必须提供一个 URL： fetch   let fetchExample = fetch("https://fjolt.com").then((res) => { // Do something with res }); 由于 fetch 的结果是异步的，我们可以使用 来捕获响应，并对其进行处理。返回的 或 response 很酷的一点是它有一堆内置方法，可以让我们立即解析从 获得的内容： then() res fetch    - 返回 URL 的文本内容。如果是网站，则返回 HTML。 res.text()    - 如果存在，则返回格式化的 JSON 数据。 res.json()    - 返回 blob 数据（如果存在）。 res.blob()    - 返回 arrayBuffer 数据，如果有的话。 res.arrayBuffer()    - 返回 formData 数据，如果有的话。 res.formData() 由于不同的 URL 产生不同类型的内容，上述方法允许我们以任何我们喜欢的方式解析该内容。为了理解这一切是如何工作的，让我们看两个非常常见的例子。 示例 1：使用 Javascript fetch 获取网站的 HTML 内容 如上所述，  为我们提供了 URL 的文本内容——因此我们可以使用它来获取 URL 的整个 HTML 内容。一旦我们使用 捕获我们的响应，我们可以使用另一个 捕获响应，从而允许我们下载并返回提供的 URL 的内容： res.text() res.text() then   let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => { return data; }); // Now contains our website's HTML. 如果链接不存在或发生错误，我们的 对象将包含错误。例如，找不到页面将返回  ，或者网关错误将返回  。 response 404 502 示例 2：通过 Javascript Fetch 获取 JSON 如果 URL 的内容由 JSON 组成，我们可以使用  。例如，以下代码将从 URL 返回一个 JSON 对象，假设 URL 正在发送有效的 JSON： res.json()   let apiResponse = fetch("https://fjolt.com/api").then(res => res.json()).then((data) => { return data; }); // Now contains a JSON object - assuming one exists  Javascript Fetch 的选项 了解 fetch 中可用的选项也很重要。它们作为一个对象出现在 URL 之后——即  。如果您以前使用过 HTTP 请求，那么您可能会很熟悉。下面显示的 函数包含您可以使用的所有可能选项： fetch(URL, { options }) fetch   fetch("https://fjolt.com/", { body: JSON.stringify({ someData: "value" }) method: 'POST' mode: 'cors' cache: 'no-cache' credentials: 'same-origin' headers: { 'Content-Type': 'application/json' }, redirect: 'follow' referrerPolicy: 'no-referrer' }); 以下是这些含义的摘要：   包含文本的主体。在这个例子中，我们发送了一些 JSON，它需要被字符串化。 body   是标准的 HTTP 方法。它可以是  /   /   /   /   /   /   /   。 method POST GET DELETE PUT CONNECT PATCH TRACE OPTIONS   是指是否接受跨源请求。它可以是  /   /   。 mode cors no-cors same-origin   是指浏览器如何与缓存交互。它可以是  /   /   /   /   。 cache default no-cache reload force-cache only-if-cached   是指是否应与请求一起发送跨源 cookie。它可以是  /   /   。 credentials include same-origin omit   包含与请求关联的任何标头。它可以包含任何 HTTP 标头 - 例如，这里显示  - 但您也可以拥有自定义 HTTP 标头。 headers Content-Type   确定如果获取的 URL 重定向会发生什么。它可以是  /   /   。 redirect follow error manual   确定随请求传递多少引荐来源信息。它可以是  /   /   /   /   /   /   /   。 referrerPolicy no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin strict-origin-when-cross-origin unsafe-url 请记住，Javascript fetch 是异步的 当我们使用 fetch 时，它会转到 URL，收集信息，并向我们提供  。这不是立即的，因为加载 URL、下载并返回需要时间。如果我们只是单独运行 fetch ，那么它之后的控制台日志只会返回一个  ，而不是来自我们想要的 URL 的  ： response Promise response   let apiResponse = fetch("https://fjolt.com/api"); console.log(apiResponse); // Returns Promise<Pending> 发生这种情况是因为 函数运行，但 Javascript 不等待  。因此，如果我们想访问  ，我们必须明确告诉 Javascript 等待它。 fetch() response response 有两种方法可以等待  ： fetch() 我们可以使用  ，并在 中操作 的响应。 then then() fetch() 我们可以使用  ，并在使用其内容之前等待 fetch 返回。 await 使用 then 等待 Javascript 中的获取 使用 经常用于捕获和处理来自 fetch 的响应。  的内容可以在 回调函数中进行操作，但不能在它之外进行操作。例如： then fetch() then()   let apiResponse = fetch("https://fjolt.com/api").then(res => res.json()).then((data) => { console.log(data); // We can do anything with the data from our api here. return data; }); console.log(apiResponse); // This will return Promise<Pending> // That means we can't use the apiResponse variable // outside of the then() function. 如果我们想在 之外使用 的内容，我们必须使用  。 then fetch() await 在 Javascript 中使用 await 等待获取 等待获取的另一种方法是使用 关键字。大多数现代浏览器都支持 ，但如果您担心支持，或者使用 14.8 之前的 Node.JS 版本，您需要将任何 代码包装在 中。 await 顶级等待 await async function 如果我们使用 await，我们可以在函数或代码的任何地方使用来自 API 的响应，并在其上使用任何 函数，例如 或  。例如： response text() json()   // Typically we wrap await in an async function // But most modern browsers and Node.JS support // await statements outside of async functions now. async getAPI() { let apiResponse = await fetch("https://fjolt.com/api"); let response = apiResponse.json(); // Since we waited for our API to respond using await // The response variable will return the response from the API // And not a promise. console.log(response); } getAPI(); 如果您想了解有关异步操作的更多信息， 。 请在此处阅读我们的异步 Javascript 教程 结论 在本指南中，我们介绍了 fetch 的工作原理。我们已经展示了您可以通过 请求发送的不同选项，以及如何使用 Javascript 中的异步概念等待响应。  是 Javascript 中一个非常强大的工具，并且一直在大型产品中经常使用。我希望你喜欢这篇文章。 fetch() fetch()

BUNCH

Fetch

Trace

2022 - HackerNoon Contributor of the Year - Coding

2022 - HackerNoon Contributor of the Year - Coding Skills

2022 - HackerNoon Contributor of the Year - Java

2022 - HackerNoon Contributor of the Year - Javascript

2022 - HackerNoon Contributor of the Year - Website Development

2022 - Tip Your Hat Tutorials Best Tutorials

Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Coding

Nominated for 2022 - HackerNoon Contributor of the Year - Coding Skills

Nominated for 2022 - Tip Your Hat Tutorials Best Tutorials

Nominated for 2022 - HackerNoon Contributor of the Year - Java

Nominated for 2022 - HackerNoon Contributor of the Year - Website Development

Nominated for Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Typescript

該音頻是用故事的原始語言製作的！

太長; 讀書

如何像专业人士一样在 Javascript 中获取数据

如何像专业人士一样在 Javascript 中获取数据

About Author

註釋

標籤

这篇文章刊登在

Related Stories

使用这 18 种开发工具来提高你的工作效率 🚀🔥

成功云迁移的完整指南：策略和最佳实践

看不见的层面：为什么用户访谈是不可替代的资产

释放人工智能的力量。前沿技术的系统评价：摘要与介绍

使用这 18 种开发工具来提高你的工作效率 🚀🔥

成功云迁移的完整指南：策略和最佳实践

看不见的层面：为什么用户访谈是不可替代的资产

释放人工智能的力量。前沿技术的系统评价：摘要与介绍

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps