promise 的 `reject` 分支未被处理，导致错误被静默忽略；必须通过 `.catch()` 捕获拒绝状态，否则页面不会显示任何内容。
在您提供的 HTML 代码中，Promise 实际上已正确执行，但并未按预期显示结果——原因并非语法错误或 DOM 引用失效，而是逻辑流程未覆盖「拒绝（rejected）」路径。
我们来逐步分析：
- toldThePeople = "BBQ Cauliflower"
- order = "BBQ Corn"
- 二者不相等 → 触发 reject("I WANT THE MANAGER!!!")
而您的调用链仅写了：
restaurantOrder.then(function (value) {
display(value);
});⚠️ 这意味着：只有 resolve 被调用时才会执行 display()；一旦 reject 触发，该 Promise 进入 rejected 状态，.then() 的回调完全被跳过，且未设置错误处理，导致信息“消失”——既不渲染，也不报错（在非严格模式下甚至不会在控制台抛出未捕获异常）。
立即学习“Java免费学习笔记（深入）”；
✅ 正确做法是：始终为 Promise 链添加 .catch()（或使用 .then(onFulfilled, onRejected) 的双参形式）：
<script>
let tag = document.getElementById("demo");
function display(value) {
tag.innerHTML = value;
}
let toldThePeople = "BBQ Cauliflower";
let restaurantOrder = new Promise(function (resolve, reject) {
let order = "BBQ Corn";
if (toldThePeople === order) {
resolve("Mmm, You guys did an awesome job!");
} else {
reject("I WANT THE MANAGER!!!");
}
});
// ✅ 正确：同时处理成功与失败
restaurantOrder
.then(display)
.catch(display); // 将错误消息同样渲染到页面
</script>? 额外建议与注意事项：
- 若需区分成功/失败样式，可扩展 display() 函数，例如：
function display(value, isError = false) { tag.innerHTML = `<span class="${isError ? 'error' : 'success'}">${value}</span>`; } // 调用时：.then(val => display(val)) 和 .catch(err => display(err, true)) - 在开发阶段，强烈建议添加全局未捕获 Promise 错误监听，便于调试：
window.addEventListener('unhandledrejection', event => { console.error('Unhandled rejection:', event.reason); }); - 确保脚本在 DOM 加载完成后执行（当前代码位于 </body> 前，已满足条件，无需额外 DOMContentLoaded 包裹）。
综上：不是 Promise “不工作”，而是它工作得太准确了——你写了一个必然被拒绝的 Promise，却只监听了“成功”分支。补上 .catch()，一切立现。
