Fetch API（手把手讲解）

什么是 Fetch API？它为什么值得你花时间学习？

在现代网页开发中，前端与后端之间的数据通信是核心环节。过去，我们依赖 XMLHttpRequest 来发起网络请求，虽然功能强大，但写法繁琐、回调嵌套严重，被称为“回调地狱”。而如今，Fetch API 的出现，就像为前端开发带来了一场轻量级革命。

Fetch API 是浏览器原生提供的一个现代化网络请求接口，它基于 Promise 设计，语法简洁，支持链式调用，极大提升了代码可读性和维护性。你可以把它想象成一个“快递员”：你只需要告诉它“把数据从这个地址取回来”，它就会自动完成运输、签收、交付的全过程，而你无需关心中间的运输细节。

与传统的 XMLHttpRequest 相比，Fetch API 不仅更易用，还天然支持异步处理，尤其适合搭配 async/await 使用，让代码逻辑清晰如流水。更重要的是，它已经成为所有现代浏览器的标准，无需引入第三方库，开箱即用。

如果你正在学习 JavaScript，或者想提升项目中数据获取的效率，那么掌握 Fetch API 是一个必须迈出的一步。

Fetch API 的基本语法与结构

使用 Fetch API 的第一步，是理解它的基本语法结构。它的核心是一个全局函数：fetch()，接收一个 URL 作为参数，返回一个 Promise 对象，该对象最终解析为 Response 类型的数据。

fetch('https://api.example.com/data')
  .then(response => {
    // 响应对象处理
    console.log(response);
  })
  .catch(error => {
    // 错误处理
    console.error('请求失败:', error);
  });

这里的关键点是：fetch() 返回的是一个 Promise，意味着你可以使用 .then() 链式调用，或者用 async/await 来处理异步逻辑。

我们来逐行解释：

• fetch('https://api.example.com/data')：发起 GET 请求，获取指定接口的数据。
• .then(response => { ... })：当请求成功返回时，执行回调函数，参数 response 是服务器的响应对象。
• .catch(error => { ... })：捕获网络错误（如断网、域名解析失败）或请求异常。

注意：即使服务器返回 4xx 或 5xx 错误，fetch() 也不会自动触发 .catch()。它认为“请求已发出”，只是响应状态不理想。这一点非常重要，后续我们会详细说明如何判断响应是否成功。

处理响应数据：从 Response 到 JSON

服务器返回的数据通常不是直接可用的文本或 JSON，而是 Response 对象。你需要调用其内置方法来读取实际内容。

最常见的操作是将响应体解析为 JSON 格式，这在与后端交互时几乎必不可少。

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    // 判断响应是否成功（HTTP 状态码 200-299）
    if (!response.ok) {
      throw new Error(`HTTP 错误！状态码：${response.status}`);
    }
    // 将响应体解析为 JSON 格式
    return response.json();
  })
  .then(data => {
    // data 是解析后的 JavaScript 对象
    console.log('获取到的帖子内容：', data);
    console.log('标题：', data.title);
    console.log('内容：', data.body);
  })
  .catch(error => {
    console.error('请求失败：', error.message);
  });

这段代码中几个关键点：

• response.ok：返回布尔值，表示状态码是否在 200~299 范围内。这是判断请求是否“成功”的标准方式。
• response.json()：这是异步方法，返回一个 Promise，用于将响应体解析为 JavaScript 对象。
• data：最终拿到的是一个标准的 JS 对象，可以直接访问属性。

📌 小贴士：response.json() 只能调用一次，因为响应体只能读取一次。如果需要多次使用，应先缓存结果。

使用 async/await 简化异步代码

虽然 .then() 链式调用是标准方式，但当逻辑复杂时，容易写出“回调地狱”。这时候，async/await 就派上用场了。

async/await 让异步代码看起来像同步代码，极大提升了可读性。

async function fetchPost() {
  try {
    // 发起请求，等待响应
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');

    // 检查状态码
    if (!response.ok) {
      throw new Error(`请求失败，状态码：${response.status}`);
    }

    // 解析 JSON 数据
    const data = await response.json();

    // 输出结果
    console.log('文章标题：', data.title);
    console.log('文章内容：', data.body);

    return data;
  } catch (error) {
    // 统一处理错误
    console.error('获取数据失败：', error.message);
    throw error; // 可以继续抛出，供上层处理
  }
}

// 调用函数
fetchPost();

在这个例子中：

• async function 声明一个异步函数，内部可以使用 await。
• await fetch(...)：暂停执行，直到请求完成。
• try...catch：替代 .catch()，更像同步代码的错误处理方式。
• 整体结构清晰，逻辑顺序自然，非常适合初学者理解和维护。

发送 POST 请求与传递数据

Fetch API 不仅能获取数据，还能发送数据。最常见的场景是提交表单、创建新资源。

发送 POST 请求时，需要设置 method 和 body 两个关键参数。

async function createPost(title, body) {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',           // 请求方法
      headers: {
        'Content-Type': 'application/json'  // 声明请求体类型
      },
      body: JSON.stringify({     // 将 JS 对象转为 JSON 字符串
        title: title,
        body: body,
        userId: 1
      })
    });

    if (!response.ok) {
      throw new Error(`创建失败，状态码：${response.status}`);
    }

    const result = await response.json();
    console.log('创建成功，返回数据：', result);
    return result;
  } catch (error) {
    console.error('请求失败：', error.message);
  }
}

// 调用示例
createPost('我的第一篇博客', '这是通过 Fetch API 发送的 POST 请求');

关键点说明：

• method: 'POST'：明确指定请求类型。
• headers：设置请求头，Content-Type 告诉服务器我们发送的是 JSON 数据。
• body: JSON.stringify(...)：必须将对象转为字符串，否则服务器无法识别。
• response.json()：接收响应数据，通常用于获取服务器返回的完整对象（如新生成的 ID）。

✅ 注意：JSON.stringify 是必须的，否则请求体将被视为字符串形式的原始数据，可能被服务器拒绝。

常见问题与最佳实践

在实际使用 Fetch API 时，开发者常遇到一些问题。以下是一些高频场景和解决方案：

最佳实践建议：

• 始终使用 response.ok 判断请求是否成功。
• 在发送数据前，使用 JSON.stringify() 格式化 body。
• 为所有请求添加 try...catch 或 .catch()，避免程序崩溃。
• 封装通用请求函数，如 api.get(url)、api.post(url, data)，提高复用性。

总结：Fetch API 是现代前端的基石

经过上述讲解，我们可以清晰看到，Fetch API 并非只是一个简单的“发请求”工具，而是现代前端开发不可或缺的核心能力。它语法简洁、功能强大，支持各种请求类型，配合 async/await 使用，让异步编程变得轻松自然。

无论你是初学者，还是已有经验的开发者，掌握 Fetch API 都能显著提升你的开发效率和代码质量。它不仅是学习 JavaScript 的必修课，更是构建响应式、高性能 Web 应用的基础。

记住，每一次数据请求，都是前端与后端的“对话”。而 Fetch API，就是这场对话中最优雅的桥梁。从今天开始，用它替代旧的 XMLHttpRequest，让代码更清晰，让开发更高效。