使用 fetch 完成 GET 请求时，常见的技术问题可以表述为： **"如何使用 fetch 发起 GET 请求并处理响应数据？"** 该问题共 **55 个字符**，符合要求。这个问题直击主题，涵盖了使用 `fetch` 完成 GET 请求的核心关注点，即请求的发起与响应的处理，是开发者在实际开发中经常遇到的关键问题。

Question

**如何使用 fetch 发起 GET 请求并处理响应数据？** 在前端开发中，经常使用 `fetch` API 向服务器发起 GET 请求以获取数据。开发者需要了解如何正确构造请求 URL、设置请求头、处理异步响应以及解析返回的数据格式（如 JSON 或文本）。此外，如何处理网络错误和无效响应状态（如 404 或 500 错误）也是常见难点。典型问题包括：如何通过 Promise 或 async/await 获取响应数据？如何判断响应是否成功？如何将响应流转换为 JSON？掌握这些技能有助于开发者高效地集成 API 接口并提升应用的数据交互能力。

Answer 1

如何使用 fetch 发起 GET 请求并处理响应数据？

在现代前端开发中，fetch API 是用于发起网络请求的标准方式之一。它基于 Promise，支持异步操作，且无需依赖第三方库。本文将从基础到进阶，系统性地讲解如何使用 fetch 发起 GET 请求，并处理响应数据。

1. 基础用法：发起最简单的 GET 请求

最基本的 fetch 调用方式如下：

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

• fetch(url) 接收一个 URL 字符串作为参数。
• 返回一个 Promise，解析为 Response 对象。

注意：即使服务器返回 404 或 500 错误，Promise 也不会自动 reject，需要开发者手动判断响应状态。

2. 解析响应数据

Response 对象提供了多个方法用于解析数据，最常用的是：

• json()：将响应体解析为 JSON。
• text()：将响应体解析为字符串。
• blob()：用于处理二进制文件，如图片、PDF 等。

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

3. 判断响应是否成功

由于 fetch 不会自动拒绝 Promise，即使遇到 4xx 或 5xx 错误状态码，也需要手动判断：

fetch('https://api.example.com/data')
  .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);
  });

状态码范围	含义
200-299	成功
400-499	客户端错误（如 404 不存在、401 未授权）
500-599	服务器错误

4. 使用 async/await 替代 Promise

对于习惯使用同步风格的开发者，async/await 提供了更清晰的写法：

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    console.log('Data:', data);
  } catch (error) {
    console.error('Error:', error);
  }
}

5. 设置请求头

GET 请求通常不需要设置请求头，但在某些场景下（如认证、指定 Accept 类型）可以添加：

fetch('https://api.example.com/data', {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer YOUR_TOKEN',
    'Accept': 'application/json'
  }
});

6. 错误处理进阶

除了服务器返回的错误状态码，还需要处理网络错误、跨域问题等：

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error(`Server responded with status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log('Data:', data);
  })
  .catch(error => {
    if (error.message.includes('Failed to fetch')) {
      console.warn('Network error occurred');
    } else {
      console.error('Application error:', error);
    }
  });

7. 流式处理响应

对于大文件或流式数据，可以使用 ReadableStream 进行逐块读取：

fetch('https://api.example.com/large-data')
  .then(response => {
    const reader = response.body.getReader();
    function read() {
      reader.read().then(({ done, value }) => {
        if (done) {
          console.log('Stream complete');
          return;
        }
        console.log('Received chunk:', value);
        read();
      });
    }
    read();
  });

8. 完整流程图

graph TD A[开始] --> B[调用 fetch] B --> C{响应是否成功?} C -->|是| D[解析响应数据] C -->|否| E[抛出错误] D --> F[处理数据] E --> G[捕获错误并处理] F --> H[结束] G --> H