AJAX 响应

使用 Fetch 处理服务器响应

Fetch API 提供了一种现代且灵活的方式来处理服务器请求的响应。

Response 对象

当一个 fetch 请求成功时，它会返回一个 Promise，该 Promise 解析为一个 Response 对象。此对象包含有关响应的信息（如状态码、头部）以及访问响应体的方法。

Response 对象的主要属性和方法：

属性/方法	描述
response.ok	一个布尔值，表示 HTTP 状态码是否在成功范围 (200-299) 内。
response.status	响应的 HTTP 状态码（例如：200, 404, 500）。
response.statusText	与状态码对应的状态消息（例如：“OK”，“Not Found”）。
response.headers	一个 Headers 对象，用于访问响应头部。
response.text()	返回一个 Promise，该 Promise 将响应体解析为字符串。
response.json()	返回一个 Promise，该 Promise 将响应体文本解析为 JSON 的结果。
response.blob()	返回一个 Promise，该 Promise 将响应体解析为 Blob（二进制数据）。
response.formData()	返回一个 Promise，该 Promise 将响应体解析为 FormData。
response.arrayBuffer()	返回一个 Promise，该 Promise 将响应体解析为 ArrayBuffer。

重要提示：像 .json()、.text() 等方法会消耗响应体。你每个 Response 对象只能使用其中一个方法一次。

处理文本响应

如果你期望从服务器接收纯文本，使用 response.text() 方法：

fetch('data.txt')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.text(); // 将响应体作为文本获取
  })
  .then(textData => {
    console.log('Received text:', textData);
    document.getElementById('myDiv').textContent = textData; // 显示文本
  })
  .catch(error => {
    console.error('Error fetching text data:', error);
    document.getElementById('myDiv').textContent = 'Failed to load data.';
  });

处理 JSON 响应

JSON 是 API 最常用的格式。使用 response.json() 将其直接解析成 JavaScript 对象或数组：

async function fetchUserData() {
  const userInfoDiv = document.getElementById('userInfo');
  try {
    const response = await fetch('/api/user/123'); // 示例 API 端点

    if (!response.ok) {
      throw new Error(`API Error: ${response.status} ${response.statusText}`);
    }

    const userData = await response.json(); // 解析 JSON 响应体

    console.log('Received user data:', userData);
    // 假设 userData 类似于 { name: 'Alice', email: 'alice@example.com' }
    userInfoDiv.innerHTML =
      `<h2>${userData.name}</h2><p>Email: ${userData.email}</p>`;

  } catch (error) {
    console.error('Failed to fetch user data:', error);
    userInfoDiv.textContent = `Error loading user data: ${error.message}`;
  }
}

fetchUserData();

此示例使用 async/await 来编写更清晰的异步代码。

检查响应状态

在处理响应体之前，务必检查 response.ok 属性或 response.status 状态码。从网络角度来看，404（未找到）或 500（内部服务器错误）仍然是’成功’的 fetch 请求，但表示应用层面的错误。

fetch('/api/some-resource')
  .then(response => {
    if (!response.ok) {
      // 根据状态码处理特定错误
      if (response.status === 404) {
        throw new Error('Resource not found (404)');
      } else if (response.status === 500) {
        throw new Error('Server error (500)');
      } else {
        throw new Error(`Unexpected problem: ${response.status}`);
      }
    }
    return response.json(); // 仅在状态为 OK 时解析
  })
  .then(data => {
    console.log('Data received:', data);
  })
  .catch(error => {
    console.error('Fetch operation failed:', error);
    // 更新 UI 以告知用户错误信息
  });

有关处理不同数据类型和高级响应功能的更多详细信息，请参阅 MDN Fetch API 文档。