接口数据 console 一打印看着正常,JSON.parse 一跑就抛错,前端群里这类问题天天出现。json解析的报错信息其实很有指向性,对着错误类型查源头就行。
三种高频报错
- Unexpected token < in JSON at position 0:接口返回的是 HTML 错误页而不是数据,多半请求 404 或 500 了,先看 Network 面板的状态码。
- Unexpected end of JSON input:内容被截断,常见于大响应超时或后端序列化中途出错。
- Unexpected token ':数据里混了单引号、尾逗号或注释,标准 JSON 的键和字符串值必须双引号包,也不许写注释。
安全的 json解析写法
try { obj = JSON.parse(txt); } catch (e) { console.log(e.message); obj = null; }别裸奔,try catch 包一层,失败给默认值,页面不至于白屏。Python 那边对应 json.loads,失败抛 JSONDecodeError,处理思路相同:先看响应头 content-type 是不是 application/json,再动手解析。
排查的三个顺手工具
浏览器 DevTools 的 Network 面板点开响应看 Preview,是不是合法 JSON 直接见分晓。本地拿不准格式,把样本粘进在线 JSON 校验工具,错在第几行都标出来。还要确认编码:响应是 GBK 而代码按 UTF-8 读,中文字段先乱码后解析失败。
一句话判断:解析报错九成问题出在数据源头,先看原始响应再改解析代码,顺序别反了。