报错分析报告

错误翻译

原文：Unexpected token '<', "<!DOCTYPE "... is not valid JSON
译文：意外的标记'<'，"<!DOCTYPE "... 不是有效的JSON

原因分析

这是一个典型的JSON解析错误。当代码期望接收JSON格式的数据时，实际上却收到了HTML内容（通常是错误页面）。

根本原因：

API请求失败：请求的接口可能返回了404、500等错误状态码

服务器返回了HTML错误页面：而不是预期的JSON响应

前端代码直接尝试解析HTML为JSON：导致JSON.parse()失败

错误位置：通常在fetch().then(response => response.json())或类似的数据解析代码处。

解决方案

方案1：检查响应状态（推荐）

fetch('https://api.example.com/data')
  .then(response => {
    // 首先检查响应状态
    if (!response.ok) {
      throw new Error(`HTTP错误: ${response.status}`);
    }
    
    // 检查Content-Type是否为JSON
    const contentType = response.headers.get('content-type');
    if (!contentType || !contentType.includes('application/json')) {
      throw new Error('服务器未返回JSON格式数据');
    }
    
    return response.json();
  })
  .then(data => {
    // 处理数据
    console.log(data);
  })
  .catch(error => {
    console.error('请求失败:', error);
    // 显示用户友好的错误信息
  });

方案2：使用try-catch处理解析错误

fetch('https://api.example.com/data')
  .then(response => response.text()) // 先获取文本
  .then(text => {
    try {
      const data = JSON.parse(text);
      // 处理数据
      console.log(data);
    } catch (error) {
      console.error('JSON解析失败:', error);
      console.log('服务器返回的内容:', text.substring(0, 200)); // 查看前200字符
    }
  })
  .catch(error => {
    console.error('请求失败:', error);
  });

##️ 预防措施

1. 添加响应验证

始终检查HTTP状态码：在解析JSON前验证response.ok或response.status

验证Content-Type：确保服务器返回的是application/json类型

使用网络调试工具：Chrome DevTools的Network标签可以帮助查看原始响应

2.️ 开发建议

API请求封装：创建统一的请求函数，集中处理错误和响应验证

错误边界处理：在前端应用中实现错误边界，避免整个应用崩溃

日志记录：在生产环境中记录详细的错误信息，包括请求URL和响应内容

推荐工具：

Postman/Insomnia：测试API端点，确保返回正确的JSON格式

Chrome DevTools：Network面板查看完整的请求/响应信息

JSONLint：在线验证JSON格式的有效性

---

下次遇到类似错误时，先检查网络请求的原始响应内容，这能快速定位问题根源。