接口调用报错,八成是它在作怪
做前后端对接的时候,最怕看到控制台弹出一行红字:SyntaxError: Unexpected token in JSON at position... 其实不用急着找后端甩锅,先看看是不是JSON格式出了问题。这类错误太常见了,尤其在调试API时,明明看着返回的数据没啥毛病,结果一解析就崩。
常见的JSON格式雷区
JSON看着简单,但细节上容易踩坑。比如多了一个逗号、用了单引号、或者字段名没加引号,都会导致解析失败。下面这个例子,看着像模像样,其实根本通不过解析:
{
"name": "张三",
"age": 25,
"city": "北京",
}注意最后那个多余的逗号,虽然在JavaScript对象里允许,但在标准JSON里是不允许的。只要出现,JSON.parse()就会直接抛错。
中文字符和转义别搞混
有时候接口返回的内容包含中文或特殊符号,比如换行符、引号,如果没正确转义,也会出问题。比如用户提交的评论里带了双引号:
{"comment": "这电影真"震撼""}这段JSON因为内部的双引号没转义,解析时会在中间断掉。正确的写法应该是把引号变成 \":
{"comment": "这电影真\"震撼\""}怎么快速查错?
别靠肉眼一行行扫。打开浏览器开发者工具的Network标签,找到出问题的请求,点开Response,复制内容扔进一个JSON校验工具里,比如 jsonlint.com,几秒就能告诉你哪一行哪个位置有问题。或者直接在控制台试一下:
try {
JSON.parse(responseData);
} catch (e) {
console.log('解析失败位置:', e.position);
}错误信息里的position字段能精准定位到出问题的字符位置,顺着往前推几格,基本就能发现是漏了括号还是多了逗号。
后端输出也要检查
有时候前端没错,问题是出在后端拼字符串返回的。比如PHP里手动生成JSON时忘了用json_encode(),而是直接拼接字符串,很容易带出非法字符。建议所有接口统一用语言自带的序列化方法生成JSON,避免人为失误。
另外,响应头也得留意。如果Content-Type没设成application/json,某些框架会默认当普通文本处理,即使内容合法也可能不自动解析。
实际场景小贴士
有次同事调支付回调,一直收不到正确数据,最后发现是对方服务器在JSON外面套了一层HTML错误页,返回的其实是500页面,而不是预期的JSON。所以看错误别只盯内容,先确认状态码是不是200,响应类型对不对。
遇到JSON解析失败,别急着重试。先把原始响应保存下来,一步步验证格式、结构、编码。多数时候,问题就藏在那些不起眼的标点和空格里。