Promise 的 reject 状态不会触发 .then(),必须显式添加 .catch() 或使用 .then(success, failure) 才能捕获错误并显示内容。
promise 的 `reject` 状态不会触发 `.then()`,必须显式添加 `.catch()` 或使用 `.then(success, failure)` 才能捕获错误并显示内容。
在前端开发中,Promise 是处理异步操作的核心机制,但其行为常被误解——尤其是对 resolve 和 reject 的响应逻辑。你提供的代码逻辑本身是正确的,但问题在于:
当 Promise 被 reject 时,.then() 回调完全不会执行,也不会抛出可见错误(除非有未捕获异常),导致页面空白且无任何提示
。
回顾你的代码:
由于 "BBQ Cauliflower" ≠ "BBQ Corn",Promise 进入 reject 状态,而你只写了:
→ .then()
仅响应 resolve
;reject 会被静默忽略(在现代浏览器中会触发 Uncaught (in promise) 控制台警告,但不阻断脚本,也不渲染内容)。
立即学习
“
Java免费学习笔记(深入)
”;
✅ 正确做法是补充错误处理:
或使用更简洁的箭头函数写法:
⚠️ 注意事项:
不要依赖 .then() 单回调处理所有情况——它不是 try...catch 的等价物;
在生产环境中,建议在 .catch() 中同时记录错误(如 console.error(error)),便于调试;
若需链式处理(例如失败后重试或兜底),可返回新 Promise 或使用 finally() 做清理;
HTML 结构和 DOM 获取(document.getElementById("demo"))无问题,可排除加载时机问题(脚本位于 底部,确保元素已存在)。
? 小技巧:为快速验证 Promise 状态,可在创建后立即 .then(console.log).catch(console.error),避免 UI 层掩盖逻辑问题。
总结:Promise 的“不工作”,往往不是语法错误,而是
状态处理不完整
。始终遵循「有 resolve 就该有 catch」原则,才能让异步流程真正可控、可观、可维护。
let toldThePeople = "BBQ Cauliflower";
let order = "BBQ Corn";
if (toldThePeople === order) {
resolve("Mmm, You guys did an awesome job!");
} else {
reject("I WANT THE MANAGER!!!"); // ? 此分支实际被执行
}restaurantOrder.then(function (value) {
display(value); // ❌ 永远不会运行
});restaurantOrder
.then(function (value) {
display(value); // 成功时显示
})
.catch(function (error) {
display(error); // 失败时同样显示(如 "I WANT THE MANAGER!!!")
});restaurantOrder
.then(display)
.catch(display);