如何前端获取json状态码

如何在前端获取 JSON 状态码：从基础到实践

在前端开发中,处理服务器返回的 JSON 数据时，状态码是一个关键信息，它帮助我们判断请求是否成功、出现了什么错误，以及后续应该如何处理响应，本文将详细介绍前端获取 JSON 状态码的各种方法，从基础概念到实际应用场景，助你全面这一技能。

理解 HTTP 状态码与 JSON 响应

我们需要明确几个概念：

1. HTTP 状态码：由服务器返回的三位数字代码，表示请求的处理结果（如 200 表示成功，404 表示未找到，500 表示服务器错误等）。
2. JSON 响应：服务器返回的数据格式，通常包含实际的数据负载和可能的状态信息。

在实际开发中,服务器可能会以两种方式包含状态信息：

• 直接在 HTTP 响应的状态字段中（如 200 OK）
• 在 JSON 响应体中自定义状态字段（如 {"code": 200, "message": "success", "data": {...}}）

获取 HTTP 响应状态码

使用 Fetch API

Fetch API 是现代前端获取网络资源的主流方式，获取 HTTP 状态码非常简单：

fetch('https://api.example.com/data')
  .then(response => {
    // 直接从 response 对象中获取状态码
    console.log('HTTP 状态码:', response.status);
    console.log('状态文本:', response.statusText);
    // 检查状态码是否表示成功（2xx）
    if (!response.ok) {
      throw new Error(`HTTP 错误! 状态码: ${response.status}`);
    }
    return response.json(); // 解析 JSON 数据
  })
  .then(data => {
    console.log('JSON 数据:', data);
  })
  .catch(error => {
    console.error('请求失败:', error);
  });

使用 XMLHttpRequest (XHR)

对于需要兼容旧浏览器的场景,可以使用 XHR：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log('HTTP 状态码:', xhr.status);
    const data = JSON.parse(xhr.responseText);
    console.log('JSON 数据:', data);
  } else {
    console.error('HTTP 错误! 状态码:', xhr.status);
  }
};
xhr.onerror = function() {
  console.error('网络请求失败');
};
xhr.send();

获取 JSON 自定义状态码

许多 RESTful API 会在 JSON 响应体中包含自定义的状态码，通常位于 code 或 status 字段中：

{
  "code": 200,
  "message": "操作成功",
  "data": {
    "id": 123,
    "name": "示例数据"
  }
}

解析 JSON 后获取自定义状态码

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    // 获取 JSON 中的自定义状态码
    const jsonStatusCode = data.code;
    console.log('JSON 状态码:', jsonStatusCode);
    // 根据自定义状态码处理逻辑
    if (jsonStatusCode === 200) {
      console.log('操作成功，数据:', data.data);
    } else {
      console.error('操作失败，错误信息:', data.message);
    }
  })
  .catch(error => {
    console.error('请求解析失败:', error);
  });

结合 HTTP 状态码和 JSON 状态码进行更精细的控制

fetch('https://api.example.com/data')
  .then(response => {
    // 首先检查 HTTP 状态码
    if (!response.ok) {
      throw new Error(`HTTP 错误! 状态码: ${response.status}`);
    }
    // 然后解析 JSON 并检查自定义状态码
    return response.json().then(data => {
      if (data.code !== 200) {
        throw new Error(`API 错误! 状态码: ${data.code}, 消息: ${data.message}`);
      }
      return data;
    });
  })
  .then(data => {
    console.log('请求成功:', data.data);
  })
  .catch(error => {
    console.error('请求失败:', error.message);
  });

实际应用场景与最佳实践

统一错误处理

创建一个统一的错误处理函数：

function handleApiResponse(response) {
  return response.json().then(data => {
    if (!response.ok || data.code !== 200) {
      throw new Error(data.message || `HTTP 错误! 状态码: ${response.status}`);
    }
    return data;
  });
}
fetch('https://api.example.com/data')
  .then(handleApiResponse)
  .then(data => {
    console.log('成功:', data);
  })
  .catch(error => {
    // 统一处理所有错误
    console.error('错误:', error.message);
    // 可以在这里显示用户友好的错误提示
  });

使用 async/await 语法

使代码更简洁易读：

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await handleApiResponse(response);
    console.log('成功:', data);
  } catch (error) {
    console.error('错误:', error.message);
  }
}
fetchData();

处理不同类型的错误

区分网络错误、HTTP 错误和 API 业务错误：

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      // 不是网络错误，但 HTTP 状态码表示失败
      return response.json().then(data => {
        throw {
          type: 'HTTP_ERROR',
          status: response.status,
          message: data.message || '请求失败',
          code: data.code
        };
      });
    }
    return response.json();
  })
  .then(data => {
    // 处理成功响应
    console.log('成功:', data);
  })
  .catch(error => {
    if (error.type === 'HTTP_ERROR') {
      console.error('HTTP 错误:', error.status, error.message);
      // 处理 HTTP 错误
    } else {
      console.error('网络错误或其他错误:', error);
      // 处理网络错误
    }
  });

常见问题与解决方案

CORS 问题

如果遇到跨域问题,确保服务器正确设置了 CORS 头部，或使用代理服务器。

JSON 解析错误

确保响应体确实是有效的 JSON，否则 response.json() 会抛出错误：

fetch('https://api.example.com/data')
  .then(response => {
    // 检查响应类型是否为 JSON
    const contentType = response.headers.get('content-type');
    if (!contentType || !contentType.includes('application/json')) {
      throw new TypeError("服务器返回的不是 JSON 数据");
    }
    return response.json();
  })
  .then(data => {
    // 处理数据
  })
  .catch(error => {
    console.error('解析错误:', error);
  });

重定向处理

默认情况下,fetch 会跟随重定向（3xx 状态码），如果需要阻止重定向，可以设置 redirect: 'manual'：

fetch('https://api.example.com/data', {
  redirect: 'manual'
})
.then(response => {
  if (response.status === 301 || response.status === 302) {
    // 处理重定向
    console.log('重定向到:', response.headers.get('Location'));
  } else {
    return response.json();
  }
});

在前端获取 JSON 状态码是开发中常见的任务，主要涉及两个方面：

1. HTTP 状态码：通过 response.status 获取，用于判断网络请求的基本成功与否。
2. JSON 自定义状态码：通过解析 JSON 响应体获取，用于处理具体的业务逻辑判断。

最佳实践包括：

• 使用 Fetch API 或 XHR 获取 HTTP 状态码
• 解析 JSON 后检查自定义状态码字段
• 结合 HTTP 和 JSON 状态码进行全面的错误处理
• 使用 async/await 和 Promise 链使代码更清晰
• 实现统一的错误处理机制

这些方法,你就能在前端开发中更有效地处理各种 API 响应，构建更健壮的应用程序。