通过为 fetch 调用包裹 try...catch 块并检查 response.ok 属性来实现错误边界。在 try 中发起请求，若网络异常或 http 状态码非 2xx（如 404、500），则进入 catch 分支处理错误逻辑，从而防止未捕获的 promise rejection 导致应用崩溃。
fetch 遇到网络故障会抛出什么异常
当网络断开、DNS 解析失败或服务器拒绝连接时，fetch 不会返回响应对象，而是直接抛出一个 TypeError 实例。此时无法访问 response.status，必须直接在 catch 中处理该异常以展示用户友好的提示。
async function handleNetworkError() {
try {
const response = await fetch('https://api.example.com/data');
if (!response.ok) throw new Error(`HTTP ${response.status}`);
return await response.json();
} catch (error) {
console.error('Network or Server Error:', error.message);
return { error: true, message: 'Request failed' };
}
}
handleNetworkError().then(console.log); // 输出: { error: true, message: 'Request failed' }
fetch 遇到 HTTP 404 状态码如何处理
对于 404 或 500 等 HTTP 错误，fetch 不会自动抛出异常，而是返回一个已解决的 Promise，但 response.ok 为 false。开发者需显式检查 response.ok 并在其为 false 时手动抛出错误，以便统一由 catch 块接管处理流程。
javascript-typescript-typescript-scaffold
下载
你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型
async function handleHttpError() {
try {
const response = await fetch('https://api.example.com/not-found');
if (!response.ok) throw new Error(`HTTP ${response.status}`);
return await response.json();
} catch (error) {
console.error('HTTP Error:', error.message);
return { error: true, message: 'Resource not found' };
}
}
handleHttpError().then(console.log); // 输出: { error: true, message: 'Resource not found' }
基于 response.ok 判断的具体实现细节
在代码中，response.ok 是一个布尔值，仅当状态码在 200-299 之间时为 true。这是区分网络层成功与业务层成功的关键点。若省略此检查，即使服务器返回 500 错误，代码也会尝试解析 JSON，可能导致 JSON.parse 失败或获取到错误信息结构，破坏错误边界的统一性。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
