json.parse和json.stringify实现字符串与对象双向转换:parse解析接口json字符串为对象,需try...catch容错;stringify将对象序列化为json字符串发送,注意类型限制与重复序列化问题。

JavaScript 中通过 JSON.parse 和 JSON.stringify 处理接口数据,核心是完成「字符串 ↔ 对象」的双向转换:接口返回的是 JSON 字符串,需用 parse 解析为 JS 对象才能读取;向后端提交数据时,常需用 stringify 把对象转成标准 JSON 字符串发送。
接收接口数据:用 JSON.parse 解析响应体
现代 fetch 或 axios 默认会尝试解析 JSON,但底层仍是调用 JSON.parse。手动处理时(比如用 XMLHttpRequest 或需要容错),需显式解析:
- 确保响应体是合法 JSON 字符串,否则
JSON.parse会抛错(如空字符串、HTML 内容、带注释的 JSON) - 推荐加
try...catch捕获解析失败,避免程序中断 - 常见错误示例:
JSON.parse("")→ SyntaxError;JSON.parse("{name: 'Alice'}")→ key 必须双引号
示例:
fetch('/api/user').then(res => res.text())
.then(text => {
try {
const data = JSON.parse(text);
console.log(data.id, data.name);
} catch (e) {
console.error('JSON 解析失败:', e.message);
}
});
发送接口数据:用 JSON.stringify 序列化请求体
向接口提交结构化数据(如 POST/PUT)时,若 Content-Type 是 application/json,必须把 JS 对象转为 JSON 字符串:
-
JSON.stringify(obj)会忽略函数、undefined、Symbol 类型属性,Date 对象转为 ISO 字符串 - 可传入第二个参数(replacer)控制哪些字段保留,第三个参数(space)用于美化输出(仅调试用)
- 注意:不要对已为字符串的 JSON 再 stringify,否则会多一层引号(如
"{\"name\":\"Tom\"}")
示例:
const user = { name: "Tom", age: 28, createdAt: new Date() };fetch('/api/users', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(user)
});
// 发送结果:{"name":"Tom","age":28,"createdAt":"2024-05-20T08:12:34.567Z"}
常见陷阱与健壮写法
实际开发中容易忽略边界情况,建议统一封装或检查:
- 后端可能返回 200 但 body 是错误 HTML(如 Nginx 502 页面),先判断
text.startsWith('{')或检查res.headers.get('content-type')?.includes('json') - 部分接口返回数组而非对象(如
[{"id":1}, {"id":2}]),JSON.parse同样支持,无需额外处理 - 需要深拷贝简单对象时,可用
JSON.parse(JSON.stringify(obj))(注意不支持函数、循环引用、Date 等) - 敏感字段(如 token、密码)在 stringify 前应主动过滤,而不是依赖后端校验
替代方案与补充说明
虽然 JSON.parse/stringify 是基础,但并非万能:
- 遇到循环引用对象会报错,可用
flatted或自定义 replacer 处理 - 需要保留 BigInt、Map、Set、RegExp 等类型时,原生 JSON 不支持,需用第三方库(如
lossless-json)或自定义序列化逻辑 - axios 默认自动解析 JSON,你只需取
response.data;但若配置了responseType: 'text',仍需手动JSON.parse - fetch 的
res.json()内部就是封装好的JSON.parse,失败时 reject,比手动更简洁
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











