JavaScript Fetch API 使用教程：附实例讲解

核心要点：

• JavaScript Fetch API 是一种发起 HTTP 请求的现代方式，支持 Promise 并拥有简洁的语法。

• 务必检查响应状态并谨慎处理错误，才能让 Fetch 请求稳定可靠。

• 使用 async/await、正确设置请求头，并妥善解析响应体，是构建可靠应用的关键。

JavaScript Fetch API 让浏览器中处理 HTTP 请求变得更简单，可以帮助您从服务器获取数据、提交新内容，并以更现代、更简洁的方式调用各类 API。

本文将通过示例和讲解，带您学习如何发起 Fetch 请求、处理响应以及管理错误。

什么是 JavaScript 中的 Fetch API？

Fetch API 是浏览器内置的 HTTP 请求接口，可用它获取数据并通过 JavaScript 与各类 API 交互。参见我们的Java 网络爬取指南。

以往使用 XMLHttpRequest 实现，而 Fetch API 更简单，且返回 Promise，这意味着您可以写出更易读、更易维护的异步代码。

大多数现代应用和网站都在使用它，因为它支持所有常见的 HTTP 方法，通过 response.json() 与 JSON 无缝衔接，并提供基于 Promise 的简洁接口来处理网络请求。

Fetch API 的语法与结构

以下是 Fetch 请求的基本结构：

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

• url是您要调用的端点。
• options 是一个对象，用于存放请求方法、请求头、请求体等内容。

Fetch API 基于 Promise，调用后会返回一个解析为 Response 对象的 Promise。随后可以通过 .then() 或 async/await 调用 response.json() 或 response.text() 等方法来读取响应体。

可在 options 的 method 中使用 GET、POST、PUT、DELETE 等方法。

JavaScript Fetch API GET 请求示例

您可以在浏览器 DevTools 控制台、带有 <script> 标签的本地 HTML/JS 文件，或现代 Node.js 开发环境中测试 GET 和 POST 示例

假设您想从某个公共 API 获取数据：

fetch('https://api.sampleapis.com/coffee/hot')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  });

在此示例中，我们使用 .json() 将响应体解析为可用的 JSON 对象，这有助于您轻松获取服务器返回的数据。

JavaScript Fetch API POST 请求示例

要发送数据，请使用 POST 请求：

fetch('https://api.restful-api.dev/objects', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'John',
    email: 'john@example.com'
  })
});

具体流程如下：

• 我们使用 POST 请求方法来发送数据。
• 我们通过 'Content-Type': 'application/json' 设置请求头。
• body 是请求的数据载荷，我们使用 JSON.stringify() 将 JavaScript 对象转换为 JSON 格式的字符串。

这在处理表单、用户输入等场景中非常实用。

How to use async/await with Fetch

使用async/await可以让代码更简洁、更易理解。以下是使用async/await改写的同一个 Fetch 请求：

async function getUsers() {
  try {
    const response = await fetch(''https://api.sampleapis.com/coffee/hot'');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

这样的写法更易读，尤其在涉及多个步骤时；而且搭配 try/catch 处理错误也更简单。

处理错误与响应状态

要处理 HTTP 错误，您需要自行检查响应状态：

fetch(''https://api.sampleapis.com/coffee/hot'')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Fetch error:', error));

务必检查response.ok和 response.status，这有助于在服务器返回错误时避免意外情况。

如何在 Fetch API 中设置请求头

请求头可以告诉服务器您发送的内容或期望得到的内容，设置方式如下：

fetch(''https://api.sampleapis.com/coffee/hot'', {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer your-token',
    'Content-Type': 'application/json'
  }
});

请求头的常见使用场景：

• 发送bearer token以完成身份验证。
• 设置 Content-Type 以配合 JSON 使用。
• 为特定 API 或代理服务器设置自定义请求头。

您发送的请求头需要与 API 的要求保持一致，否则会报错，务必检查响应头以了解服务器返回的具体内容。

在使用代理时，您经常需要处理请求头。更习惯在命令行中操作？我们的cURL API 指南通过cURL 指南讲解了相同的概念。欢迎查看我们的网络数据抓取技巧，了解数据抓取策略、代理在其中的作用，以及请求头为何重要。

使用 Fetch API 的最佳实践

为了在使用 Fetch API 时获得最佳体验，请遵循以下最佳实践：

• 使用async/await编写易读的异步代码。
• 务必检查响应状态和 response.ok。
• 如果网络响应耗时过长，请手动实现超时和重试机制（例如借助 AbortController 或自定义逻辑）。

此外，还需注意 CORS 限制：您可以在允许的范围内调整请求头，但最终仍需服务器返回正确的 CORS 响应头，请求才能成功。

Fetch API 的常见使用场景

您在以下情况中最常用到 Fetch API：

• 调用 REST API 获取数据。
• 处理需要在请求头中携带令牌的登录系统。
• 动态获取外部 HTML 或其他资源（例如 JSON，或以 blob 形式获取的图片）。

如果您从事网络数据抓取，也可以使用 Fetch API 通过代理服务器（在 Fetch 之外配置，例如在浏览器、系统或服务器层面）发送请求，从而让流量经由不同的位置转发。

Fetch API 与 Axios、XMLHttpRequest 的对比

Fetch API 是原生的、基于 Promise 的方案，适用于大多数场景，但：

• Axios 提供了一些便利功能，例如自动解析 JSON（在响应的内容类型正确时）、请求/响应拦截器，以及内置的超时支持。
• XMLHttpRequest 更为老旧，与 Promise 或现代异步代码配合使用较为麻烦。

如果您想用更少的配置获得更多高级功能，可以使用Axios；如果您倾向于轻量、无额外依赖的方案，则坚持使用 Fetch API。