本地校验关键在于先检查 fetch 响应状态和 JSON 合法性，再验证数据结构、字段类型、必填项等业务规则；需手动判断 response.ok 并捕获 response.json() 异常，再对解析后的对象做存在性、类型、格式及结构一致性校验。
使用 fetch 获取远程 JSON 文件后，本地校验的关键在于：先确保请求成功且响应体是合法 JSON，再对解析后的数据结构、字段类型、必填项等做业务逻辑检查。下面分步说明。
1. 基础 fetch 请求 + JSON 解析
默认情况下，fetch 不会自动抛出网络错误（如 404、500），需手动检查 response.ok；同时 response.json() 可能因响应体非合法 JSON 而失败。
示例代码：
fetch('https://example.com/data.json')
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
})
.then(data => {
// data 是已解析的 JS 对象，可开始校验
validateData(data);
})
.catch(err => {
console.error('获取或解析 JSON 失败：', err.message);
});
2. 常见本地校验内容与写法
校验不是“有没有数据”，而是“数据是否符合预期格式和业务规则”。建议封装为独立函数，例如 validateData(data)，包含以下检查：
-
存在性检查：确认关键字段是否存在（避免
data.user.name报错） -
类型检查：如
id应为数字、email应为字符串、tags应为数组 - 格式/范围检查：邮箱正则匹配、日期是否为 ISO 字符串、数值是否在合理区间
-
结构一致性检查：如数组内每个对象都应有
id和title
简单示例：
function validateData(data) {
if (!data || typeof data !== 'object') {
throw new Error('根数据必须是非空对象');
}
if (typeof data.id !== 'number' || data.id
3. 结合 TypeScript 或 JSON Schema 提升可靠性（可选进阶）
纯 JavaScript 运行时校验较灵活但易遗漏；若项目已用 TypeScript，可配合 zod 或 io-ts 做运行时类型守卫：
-
zod示例：const UserSchema = z.object({ id: z.number().positive(), name: z.string().min(1) });，然后UserSchema.parse(data) - JSON Schema 方案（如
ajv）适合复杂嵌套结构或需要复用校验规则的场景
这类工具能在解析后立即给出清晰错误路径（如 "tags[0].label is required"），比手写 if 更健壮。
4. 错误处理要区分场景
不同错误应有不同应对策略：
- 网络失败 / CORS / 404：提示用户“加载失败，请检查网络”
- 响应非 JSON 或语法错误：可能是服务端 bug，记录日志并降级处理（如显示默认数据）
- 校验失败：说明具体哪条规则不满足，便于排查是数据问题还是前端逻辑偏差
避免把所有错误都笼统提示为“未知错误”。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
