通过为 fetch 调用包裹 try...catch 块并检查 response.ok 属性，可以在数据请求阶段拦截错误并触发预错误边界。具体做法是在渲染组件前发起请求，若捕获到网络异常或 http 状态码非 2xx，则设置一个表示加载失败的布尔状态变量，并在 jsx 中根据该变量渲染错误 ui 而非抛出未处理的崩溃。
如何区分网络故障与 HTTP 404 错误
在 try...catch 内部，需要显式判断 response.status 以区分不同类型的失败。网络断开或 CORS 问题会直接抛出异常进入 catch 分支，而服务器返回的 404 或 500 状态码不会抛出异常，但 response.ok 为 false。开发者应在此处记录具体的错误类型，以便前端展示不同的提示文案。
async function loadData() {
try {
const response = await fetch('/api/data');
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return await response.json();
} catch (error) {
console.error('Fetch failed:', error);
throw error;
}
}
如何在 React 组件中集成此逻辑
将上述异步逻辑封装在自定义 Hook 或 useEffect 中，利用状态管理来控制 UI 显示。当 loadData 抛出错误时，更新 error 状态，组件检测到该状态后渲染错误边界组件。这种方式避免了使用第三方库，完全基于原生 Fetch API 实现可控的错误处理流程。
立即学习“Java免费学习笔记（深入）”；
function DataComponent() {
const [data, setData] = useState(null);
const [error, setError] = useState(null);
useEffect(() => {
loadData().then(setData).catch(setError);
}, []);
if (error) return <div>Failed to load data</div>;
if (!data) return <div>Loading...</div>;
return <div>{data}</div>;
}
基于程序中某个输入、条件或结果的具体问题
当 fetch 请求因网络超时或服务器无响应而失败时，catch 块捕获到的错误对象通常没有 status 属性。此时直接访问 error.status 会导致 undefined，开发者需依赖错误消息或 instanceof TypeError 来判断是否为网络层故障，从而正确触发预错误边界的降级策略。
