本文详解 Promise 未显示结果的根本原因：reject 分支未被捕获，导致错误被静默忽略；通过补充 .catch() 或使用 try...catch 配合 async/await 即可完整处理异步流程。
本文详解 promise 未显示结果的根本原因：`reject` 分支未被捕获，导致错误被静默忽略；通过补充 `.catch()` 或使用 `try...catch` 配合 `async/await` 即可完整处理异步流程。
在你提供的 HTML 示例中，Promise 确实已正确创建并执行，但页面始终空白——并非代码“不工作”，而是 Promise 因条件不匹配进入了 reject 状态，而你只注册了 .then() 处理器，未提供错误处理逻辑。JavaScript 中，.then(onFulfilled) 仅响应 resolve() 调用；一旦 Promise 被 reject()，它会跳过 .then() 的第一个参数，直接等待 .catch() 或 .then(null, onRejected)。
来看关键逻辑：
let toldThePeople = "BBQ Cauliflower";
let order = "BBQ Corn";
if (toldThePeople === order) { // ❌ false → 执行 reject
resolve("Mmm, You guys did an awesome job!");
} else {
reject("I WANT THE MANAGER!!!"); // ✅ 此处被触发
}由于 "BBQ Cauliflower" ≠ "BBQ Corn"，Promise 立即被拒绝，但后续仅写了：
restaurantOrder.then(function (value) {
display(value); // ✅ 永远不会执行
});→ 结果：错误被抛出但无人捕获，控制台可能显示 Uncaught (in promise) 警告，而 DOM 无任何更新。
立即学习“Java免费学习笔记（深入）”；
✅ 正确做法：始终处理 rejection
方案一：链式添加 .catch()
restaurantOrder
.then(function (value) {
display(value); // 成功时显示
})
.catch(function (error) {
display(error); // 失败时同样显示（如 "I WANT THE MANAGER!!!")
});方案二：使用 .then(success, failure)
restaurantOrder.then(
function (value) {
display(value);
},
function (error) {
display(error);
}
);方案三（现代推荐）：async/await + try...catch
async function handleOrder() {
try {
const result = await restaurantOrder;
display(result);
} catch (error) {
display(error);
}
}
handleOrder();⚠️ 注意事项
- 不要忽略 Promise rejection：未捕获的 rejected Promise 会触发 unhandledrejection 事件，并在开发者工具中报错，影响调试体验。
- .then() 返回新 Promise：链式调用中，每个 .then() 或 .catch() 都返回一个新的 Promise，便于组合异步操作。
- DOM 操作时机安全：本例中脚本置于 <body> 底部，确保 #demo 元素已存在；若移至 <head>，需包裹在 DOMContentLoaded 事件中。
✅ 总结
Promise 不是“不工作”，而是你只监听了成功路径。真实项目中，每一个 Promise 链都应以 .catch() 结尾，或由 async/await 配合 try/catch 全覆盖。修正后，页面将如实显示 "I WANT THE MANAGER!!!" —— 这正是程序按预期运行的证明。
