掌握 Fetch API：在 JavaScript 中简化 HTTP 请求

JavaScript 获取 API

Fetch API 是 JavaScript 中基于承诺的现代接口，用于发出 HTTP 请求。它简化了从服务器获取资源的过程，取代了 XMLHttpRequest 等旧方法。 Fetch 提供了一种更清晰、更易读的方法来处理网络请求和响应，支持 Promises、流式传输和异步/等待等功能。

---

1. Fetch API 的主要特点

• 基于 Promise： 提供更优雅的方式来处理异步操作。
• 简化的语法：与 XMLHttpRequest 相比更具可读性。
• 支持流式传输：有效处理大型响应。
• 可扩展： 轻松与现代 JavaScript 工具和库集成。

---

2. Fetch 的基本语法

fetch(url, options)
  .then(response => {
    // Handle the response
  })
  .catch(error => {
    // Handle errors
  });

---

3.发出 GET 请求

获取默认为 GET 方法。

示例：

fetch("https://jsonplaceholder.typicode.com/posts")
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log("Data:", data))
  .catch(error => console.error("Error:", error));

---

4.发出 POST 请求

要将数据发送到服务器，请使用带有选项对象中的 body 属性的 POST 方法。

示例：

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "foo",
    body: "bar",
    userId: 1,
  }),
})
  .then(response => response.json())
  .then(data => console.log("Response:", data))
  .catch(error => console.error("Error:", error));

---

5.常见的获取选项

fetch 函数接受一个选项对象来配置请求：

Option	Description
method	HTTP method (e.g., GET, POST, PUT, DELETE).
headers	Object containing request headers.
body	Data to send with the request (e.g., JSON, form data).
credentials	Controls whether cookies are sent with the request (include, same-origin).

选项

---

描述

标题> 方法 HTTP 方法（例如 GET、POST、PUT、DELETE）。 标题 包含请求标头的对象。 正文 随请求发送的数据（例如 JSON、表单数据）。 凭证 控制cookie是否随请求一起发送（包括同源）。 表>

6.处理响应

Method	Description
response.text()	Returns response as plain text.
response.json()	Parses the response as JSON.
response.blob()	Returns response as a binary Blob.
response.arrayBuffer()	Provides response as an ArrayBuffer.

来自 fetch 调用的 Response 对象包含处理数据的方法： 方法 描述 标题> response.text() 以纯文本形式返回响应。 response.json() 将响应解析为 JSON。 response.blob() 以二进制 Blob 形式返回响应。 response.arrayBuffer() 以 ArrayBuffer 形式提供响应。 表>

示例：获取 JSON

fetch(url, options)
  .then(response => {
    // Handle the response
  })
  .catch(error => {
    // Handle errors
  });

---

7.将 Async/Await 与 Fetch 结合使用

Async/await 简化了 Fetch 中 Promise 的处理。

示例：

fetch("https://jsonplaceholder.typicode.com/posts")
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log("Data:", data))
  .catch(error => console.error("Error:", error));

---

8.获取中的错误处理

与 XMLHttpRequest 不同，Fetch 不会因为 HTTP 错误而拒绝 Promise。您必须检查响应的 ok 属性或状态代码。

示例：

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "foo",
    body: "bar",
    userId: 1,
  }),
})
  .then(response => response.json())
  .then(data => console.log("Response:", data))
  .catch(error => console.error("Error:", error));

---

9.超时获取

Fetch 本身不支持请求超时。您可以使用 Promise.race() 实现超时。

示例：

fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("Error:", error));

---

10。比较：Fetch API 与 XMLHttpRequest

Feature	Fetch API	XMLHttpRequest
Syntax	Promise-based, simpler, cleaner.	Callback-based, verbose.
Error Handling	Requires manual handling of HTTP errors.	Built-in HTTP error handling.
Streaming	Supports streaming responses.	Limited streaming capabilities.
Modern Features	Works with Promises, async/await.	No built-in Promise support.

功能

---

获取 API

XMLHttpRequest 标题> 语法

基于承诺，更简单，更干净。 基于回调，详细。

错误处理

需要手动处理 HTTP 错误。 内置 HTTP 错误处理。

流媒体

支持流式响应。 流媒体功能有限。

现代特色

与 Promises、async/await 一起使用。 没有内置的 Promise 支持。 表>

---

11。何时使用 Fetch API

Fetch 是现代 Web 开发项目的理想选择。

它与 Promises 和 async/await 无缝集成。
当您需要更干净且更易于维护的代码时使用它。

12。结论 Fetch API 简化了在 JavaScript 中发出 HTTP 请求，为 XMLHttpRequest 提供了更现代、更易读的替代方案。凭借其基于 Promise 的架构，它更适合异步操作，尤其是与 async/await 配合使用时。了解 Fetch API 对于构建现代动态 Web 应用程序至关重要。 嗨，我是 Abhay Singh Kathayat！ 我是一名全栈开发人员，拥有前端和后端技术方面的专业知识。我使用各种编程语言和框架来构建高效、可扩展且用户友好的应用程序。 请随时通过我的商务电子邮件与我联系：kaashshorts28@gmail.com。

以上是掌握 Fetch API：在 JavaScript 中简化 HTTP 请求的详细内容。更多信息请关注PHP中文网其他相关文章！