JSON.parse需用try...catch兜底防解析失败，再配合可选链（?.）安全访问属性；safeParse工具函数统一处理解析异常并校验结果类型，结合TypeScript接口校验可进一步提升健壮性。
用 JSON.parse 解析后端返回的 JSON 字符串时，如果数据结构意外变动（比如字段缺失、类型不符、嵌套层级错乱），直接访问属性极易触发 Cannot read property 'xxx' of undefined，导致页面白屏。配合可选链操作符（?.）能显著提升容错性，但关键在于：它不能解决 JSON.parse 本身的解析失败问题 —— 那得靠 try...catch 兜底。
先安全解析，再安全访问
JSON.parse 本身不处理无效 JSON（如空字符串、null、格式错误），一旦抛错就会中断执行。必须包裹在 try...catch 中；而可选链只能作用于已成功解析出的对象，不能跳过解析环节。
- ❌ 错误写法（未捕获解析异常）：
const data = JSON.parse(res.data); console.log(data?.user?.name);—— 若res.data是"null"或""，JSON.parse直接报错，后续代码不执行 - ✅ 正确流程：先
try解析 → 得到对象 → 再用?.安全取值
封装一个健壮的 parse 工具函数
把容错逻辑收拢，避免每个接口都重复写 try...catch：
function safeParse(jsonStr) {
try {
const parsed = JSON.parse(jsonStr);
return parsed !== null && typeof parsed === 'object' ? parsed : null;
} catch (e) {
console.warn('JSON parse failed:', e.message, 'input:', jsonStr);
return null;
}
}
调用示例：
Java Maven Common
下载
Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。
立即学习“Java免费学习笔记（深入）”；
const rawData = await fetch('/api/user').then(r => r.text());
const user = safeParse(rawData)?.user; // 解析失败时返回 null，?user 不会报错
const name = user?.name ?? '匿名用户'; // 进一步兜底默认值
可选链不是万能的，注意边界场景
?. 只防止 undefined 或 null 上的属性访问，但对以下情况无效：
- 原始类型（字符串、数字）上误用：
"abc"?.length合法，但123?.toFixed(2)会报错（数字字面量不能链式调用） - 数组索引越界：
arr?.[0]?.name安全，但arr?.[999]?.name中若arr存在但长度不足，arr[999]是undefined，?.仍生效 - 函数调用前没判空：
obj?.method?.()才安全；obj?.method()如果method不存在，会尝试调用undefined()报错
配合 TypeScript 类型守门更进一步
运行时容错 + 编译期约束效果最佳。定义明确的接口，并用类型断言或 as 做轻量校验：
interface User { id: number; name: string; profile?: { avatar: string }; }
const data = safeParse(jsonStr);
if (data && typeof data === 'object' && 'id' in data && 'name' in data) {
const user = data as User; // 类型更可信
console.log(user.profile?.avatar ?? '/default.png');
}
这样既保留了 JS 的灵活性，又通过类型缩小和显式检查堵住常见漏点。
