如何优雅处理fetch请求中预期的HTTP错误？

你当前的思路是对的——抛出异常确实是退出fetch流程的正确方式，而直接return之所以不行，是因为then()方法不管你return什么（只要不是抛出错误或返回一个rejected状态的Promise），都会把这个返回值包装成resolved状态的Promise，进而进入下一个then()回调，所以空return只会让后续then()拿到undefined，没法终止流程。

先明确fetch的核心特性 #

首先得搞清楚：fetch只有在网络层面的错误（比如断网、域名解析失败）才会自动触发reject，进入catch()；像404、500这类HTTP状态码错误，fetch依然会返回resolved状态的Promise，所以必须手动通过r.ok（或者r.status）来判断请求是否成功，这一步你已经做对了。

优化你的错误处理逻辑 #

你现在抛出的是一个空的Error()，其实可以给它加上具体的错误信息，这样在catch()里还能区分不同的错误类型（比如是HTTP错误还是网络错误），让错误处理更灵活。另外，也可以用Promise.reject()来返回一个拒绝状态的Promise，效果和抛出错误完全一致，看你个人习惯。

优化后的代码示例：

fetch(`https://cdnjs.com/libraries/sdfsdfsfsdfsdfsdfdf`, { mode: 'no-cors' })
 .then(r => {
 if (!r.ok) {
 console.log("page does not exist");
 // 带上状态码或具体信息，方便调试和后续处理
 throw new Error(`请求失败，状态码：${r.status}`);
 }
 return r.json();
 })
 .then(r => {
 console.log(r);
 // 正常处理JSON数据的逻辑
 })
 .catch(err => {
 // 统一处理所有错误场景
 if (err.message.includes("请求失败")) {
 // 专门处理页面不存在或HTTP错误的情况
 console.log("处理页面不存在的错误：", err);
 } else {
 // 处理网络错误等其他问题
 console.log("网络或其他异常：", err);
 }
 });

关于no-cors模式的小提醒 #

你示例里用了mode: 'no-cors'，这种模式下返回的是opaque响应——你没法读取r.status、r.ok这些属性的真实值，也没法正常解析JSON（r.json()会直接失败）。这是你示例的特殊情况，正常跨域请求如果有CORS支持的话，就可以正常获取状态码和解析响应了。

总结 #

• 当检测到HTTP错误时，抛出错误（或返回Promise.reject()）是终止fetch流程、跳过后续then()直接进入catch()的正确做法；
• 直接return无法终止流程，因为then()会把返回值包装成resolved Promise；
• 给错误加上具体信息，能让错误处理更清晰、更灵活。

内容的提问来源于stack exchange，提问作者WoJ