JavaScript 中 Fetch API 的完整指南

前言

Fetch API 是一种通过 JavaScript 接口从远程或本地服务器获取资源的简单方法。这意味着浏览器可以直接向 Web 服务器发出 HTTP 请求。这是通过 fetch（） 方法实现的，该方法返回一个 promise，其响应使用 Response 对象实现。

fetch（） 方法采用一个强制参数，该参数是我们要从中获取数据的远程服务器或源的路径。一旦收到响应，开发人员就有责任决定如何处理正文内容并将其显示在某个 HTML 模板中。

简单示例

下面是一个比较基本的 fetch（） 示例，它从远程服务器抓取数据：

fetch(url)
  .then(
    //handle the response
  )
  .catch(
    //handle the errors
  )

面的示例使用简单的 Promise 来实现 fetch（） 方法。我们指定一个 URL，并将其存储在 const 变量中。

使用 fetch（） 方法

GET 请求

GET 请求用于从服务器检索数据。默认情况下，除非另有说明，否则所有 HTTP 请求都是 GET。

例如，如果我们正在构建一个待办事项列表应用程序，我们需要在前端获取和显示任务。使用 JavaScript，我们可以在 HTML 中定位一个无序列表 （ul），并使用获取的数据动态填充它。以下是我们设置 HTML 结构的方法：

<ul id="list">

</ul>

当我们输入待办事项列表项时，它会存储在我们的服务器上。要检索这些项目，我们需要使用 GET 请求。

我们在 JavaScript 中要做的第一件事是通过其 ID 从 DOM 获取 ul 元素，以便我们稍后可以将列表项附加到它：

const ul = document.getElementById("list")

然后，我们继续将将我们连接到远程服务器的 API 的 URL 存储在名为 URL 的变量中：

const url = "https://jsonplaceholder.typicode.com/todos"

我们已经得到了我们需要的变量。现在我们可以开始使用 fetch（） 了。请记住，fetch（） 方法只考虑一个参数：URL。在这种情况下，我们将传入我们的 url 变量：

fetch(url)

仅此一项无法为我们提供所需的数据，因为响应不是 JSON 格式。我们需要解析它，以便我们可以处理数据并将其显示在我们的 HTML 中。为此，我们使用 .json（） 方法：

fetch(url)
  .then(response => response.json())

运行 fetch（） 后，它返回一个解析为 Response 对象的 promise。这 .then（） 方法用于处理此 Response 对象。这 .json（） 方法，它返回另一个 promise，该 promise 解析为我们需要的 JSON 数据 ：

fetch(url)
  .then(response => response.json())
  .then(data => {

  })

第二个 .then（） 上述用于处理前面的 .then（） 的 data 参数是解析后的 JSON 数据。 现在我们有了数据，我们如何将其输出到 HTML 模板以使其在页面上可见？

我们有一个 ul 元素，我们希望将数据显示为待办事项列表。对于我们获取的每个待办事项，我们将创建一个 li 元素，将文本设置为我们获取的项目，然后将 li 附加到 ul 元素。

fetch(url)
  .then(response => response.json())
  .then(data => {
    data.forEach(todo => {
    const li = document.createElement("li")
    li.innerText = todo.title
    ul.appendChild(li)
    })
  })

我们完整的 JavaScript 逻辑应该如下所示：

const ul = document.getElementById("list")
const url = "https://jsonplaceholder.typicode.com/todos"

fetch(url)
  .then(response => response.json())
  .then(data => {
    data.forEach(todo => {
    const li = document.createElement("li")
    li.innerText = todo.title
    ul.appendChild(li)
    })
  })

这样，我们应该会看到网页上显示的待办事项列表。默认情况下，JSONPlaceholder 最多返回 200 个待办事项，但我们始终可以使用我们的逻辑来减少这个数字。我们可以获得的不仅仅是待办事项的标题。我们可以找到的更多数据的一个示例可能是任务的状态。

POST 请求

现在我们已经了解了如何从服务器获取数据，我们将了解如何向服务器添加数据。想象一下在网站上填写表格或输入数据。这些数据需要以某种方式进入数据库，我们通常使用 POST 请求来实现这一点。

在我们的 HTML 代码中，我们将有一个带有输入字段和提交按钮的小表单：

<form id="todo-form">
        <input type="text" id="todo-input" placeholder="Enter your task here..." required>
        <button type="submit">Add To-do</button>
</form>

然后在 JavaScript 中，我们想要抓取两个元素并指定 URL，通过它发出请求：

const form = document.getElementById("todo-form");
const input = document.getElementById("todo-input");

const url = "https://jsonplaceholder.typicode.com/todos"

我们将创建一个事件侦听器，以便每次提交表单时都会发出请求：

form.addEventListener("submit", (event) => {
  event.preventDefault()

})

数据通常作为具有特定键值对的对象发送到后端，这些键值对表示我们想要存储数据的格式。在我们的例子中，我们想要存储待办事项的标题和状态。

例如：

const newToDo = {
  title: input.value,
  completed: false,
}

现在，我们可以开始设置我们的 POST 请求了。与只需要一个参数的 GET 请求不同，POST 请求需要两个参数。第一个是 URL，第二个是包含 method、body 和 headers 键的对象：

fetch(url, {
    method: "POST",
    body: JSON.stringify(newTodo),
    headers: {
      "Content-Type": "application/json",
    },
})

method键定义正在发出的请求的类型,在本例中，它设置为 POST， 表示我们正在向服务器发送数据。body:包含数据，使用 JSON 格式化为 JSON 字符串。

这些是简单 [POST request](https://blog.logrocket.com/how-to-make-http-post-request-with-json-body-in-go/) .我们最终的 JavaScript 逻辑将如下所示：

const form = document.getElementById("todo-form");
const input = document.getElementById("todo-input");

const url = "https://jsonplaceholder.typicode.com/todos";

form.addEventListener("submit", (event) => {
  event.preventDefault();
  const newTodo = {
    title: input.value,
    completed: false,
  };

  fetch(url, {
    method: "POST",
    body: JSON.stringify(newTodo),
    headers: {
      "Content-Type": "application/json",
    },
  });
});

除了 GET 和 POST 之外，在处理数据时还可以使用各种其他作。您可以访问 MDN 文档以了解有关这些请求以及如何使用它们的更多信息。

如何使用 fetch 标头

除了从客户端提供和接收数据外，服务器还需要了解它收到的每个请求。这可以通过标头实现，标头充当元数据并伴随请求。这些键值对告诉服务器客户端正在发出什么样的请求，以及如何响应它。

要理解标头，我们必须讨论存在的两个类别：获取请求标头和获取响应标头。

获取请求标头

顾名思义，请求标头告诉服务器您正在发出什么样的请求，并且可能包括服务器在响应之前需要满足的条件。

在我们的 POST 示例中，我们使用 Content-Type 标头来指定我们正在发送 JSON 数据。另一个重要的标头是 Authorization，它携带身份验证详细信息，例如用于安全 API 访问的令牌或 API 密钥。Accept 标头告诉服务器我们在响应中喜欢哪种数据格式。

某些标头（称为禁止标头名称）由浏览器自动设置，无法以编程方式修改。这些称为禁止的标头名称

获取响应

当服务器处理请求时，它会使用标头进行响应，这些标头提供有关响应的重要详细信息。

关键响应标头包括状态代码 ，指示请求是成功 （200 OK） 还是遇到问题 （500 服务器错误 ） 。Content-Length 指定返回数据的大小，而 Content-Type 显示格式，例如 JSON 或 HTML。

一些标头在请求和响应中同时发挥作用，例如：

• Cache-Control:管理浏览器缓存行为。
• Accept-Encoding:告诉服务器客户端支持哪种压缩格式。

标头有助于简化客户端和服务器之间的通信，改进响应处理。

结论

我们介绍了 Fetch API 的基础知识，从发出简单的 GET 和 POST 请求到处理错误、处理标头和管理流响应。虽然还有很多东西需要探索，但这个基础使您能够自信地在 JavaScript 中使用 fetch。掌握这些概念将帮助您构建更高效、更可靠的 Web 应用程序。