Fetch API：基本语句、用法和案例

Fetch API 是现代 JavaScript 中用于网络请求的核心工具，它提供了一种简洁、高效的方式来获取资源（如数据、文件等）。相比传统的 XMLHttpRequest，Fetch API 更易用，支持 Promise，并能处理异步操作。本文将逐步介绍 Fetch API 的基本语句、常见用法，并通过实际案例加深理解。

一、Fetch API 的基本语句

Fetch API 的核心是 fetch() 函数，它接受一个 URL 作为参数，返回一个 Promise 对象。基本语法如下：

fetch(url, options)
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  });

url：必需参数，指定请求的目标地址（例如 'https://api.example.com/data'）。
options：可选参数，是一个对象，用于配置请求（如设置请求方法、头信息、请求体等）。常见选项包括：
- method：请求方法（如 'GET'、'POST'、'PUT'、'DELETE'）。
- headers：请求头信息（如 { 'Content-Type': 'application/json' }）。
- body：请求体数据（用于 POST 或 PUT 请求）。
响应处理：通过 .then() 处理成功响应，响应对象包含状态码、头信息和数据体。
错误处理：通过 .catch() 捕获网络错误或请求失败。

Fetch API 默认使用 GET 方法，如果省略 options，则发送一个简单的 GET 请求。

二、Fetch API 的用法详解

Fetch API 的用法灵活，适合各种场景。以下是关键用法步骤：

发送基本 GET 请求
获取数据时，通常使用 GET 方法。响应对象需要解析（如 JSON 数据）。

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    if (!response.ok) { // 检查响应状态码（如 200 表示成功）
      throw new Error('网络响应异常');
    }
    return response.json(); // 将响应体解析为 JSON
  })
  .then(data => {
    console.log(data); // 输出解析后的数据
  })
  .catch(error => {
    console.error('请求失败:', error);
  });

发送 POST 请求
提交数据时，使用 POST 方法。需设置 method 和 body。

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json' // 指定数据格式
  },
  body: JSON.stringify({ // 将对象转换为 JSON 字符串
    title: '测试标题',
    body: '测试内容',
    userId: 1
  })
})
  .then(response => response.json())
  .then(data => console.log('提交成功:', data))
  .catch(error => console.error('提交失败:', error));

处理异步请求
使用 async/await 语法使代码更简洁，避免回调嵌套。

async function fetchData() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    if (!response.ok) throw new Error('请求失败');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('错误:', error);
  }
}
fetchData(); // 调用函数

错误处理
Fetch API 不会拒绝 Promise 当 HTTP 状态码为 4xx 或 5xx 时，需手动检查 response.ok。常见错误包括：
- 网络问题（如 TypeError: Failed to fetch）。
- 服务器错误（状态码 500）。
- 客户端错误（状态码 404）。

三、实际案例

以下案例基于免费测试 API（如 JSONPlaceholder），可直接运行在浏览器控制台。

案例 1：获取并显示用户数据
此案例演示如何获取用户列表并输出到控制台。

// 获取用户数据
fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => {
    if (!response.ok) throw new Error('数据获取失败');
    return response.json();
  })
  .then(users => {
    console.log('用户列表:');
    users.forEach(user => console.log(`ID: ${user.id}, 姓名: ${user.name}`));
  })
  .catch(error => console.error('错误:', error));

案例 2：提交新帖子
此案例演示如何创建一个新帖子并处理响应。

// 提交新帖子
fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    title: 'Fetch API 教程',
    body: '这是一篇关于 Fetch API 的文章。',
    userId: 1
  })
})
  .then(response => response.json())
  .then(data => console.log('创建成功，帖子ID:', data.id))
  .catch(error => console.error('创建失败:', error));

案例 3：更新数据
此案例演示如何更新现有资源（使用 PUT 方法）。

// 更新帖子内容
fetch('https://jsonplaceholder.typicode.com/posts/1', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    id: 1,
    title: '更新后的标题',
    body: '更新后的内容',
    userId: 1
  })
})
  .then(response => response.json())
  .then(data => console.log('更新成功:', data))
  .catch(error => console.error('更新失败:', error));

四、总结

Fetch API 是 JavaScript 中处理网络请求的强大工具，它简化了异步操作，支持多种请求方法（GET、POST 等），并易于集成错误处理。关键优势包括：

简洁性：基于 Promise，避免回调地狱。
灵活性：通过 options 配置复杂请求。
兼容性：现代浏览器均支持（需注意旧浏览器可能需要 polyfill）。

在实际开发中，建议：

始终检查 response.ok 处理 HTTP 错误。
使用 async/await 提升代码可读性。
测试 API 端点以确保稳定性。

通过本文的案例，我们可以快速上手 Fetch API，高效构建 Web 应用。

Fetch API：基本语句、用法和案例

Coder Chen