本文详解 Promise 未触发 DOM 更新的根本原因：reject 状态未被处理，导致 then() 被跳过；通过补全 .catch() 或使用 .finally()，即可确保错误状态也能正确渲染到页面。
本文详解 promise 未触发 dom 更新的根本原因：`reject` 状态未被处理，导致 `then()` 被跳过；通过补全 `.catch()` 或使用 `.finally()`，即可确保错误状态也能正确渲染到页面。
在前端开发中，Promise 是处理异步操作的核心机制，但初学者常误以为只要写了 .then() 就能捕获所有结果——实际上，.then() 仅响应 resolve，而 reject 会直接跳过它，若未显式捕获，不仅页面无输出，控制台还会抛出 Uncaught (in promise) 警告。
回到示例代码，问题根源非常明确：
let toldThePeople = "BBQ Cauliflower";
let order = "BBQ Corn";
// ❌ 二者不相等 → 触发 reject
if (toldThePeople === order) {
resolve("Mmm, You guys did an awesome job!");
} else {
reject("I WANT THE MANAGER!!!"); // ← 此处执行！
}由于 "BBQ Cauliflower" !== "BBQ Corn"，Promise 立即进入 rejected 状态，而后续仅调用了 .then()，reject 被静默忽略，display() 函数从未执行，因此 <div id="demo"> 始终为空。
✅ 正确做法是同时处理成功与失败路径：
立即学习“Java免费学习笔记（深入）”；
<script>
let tag = document.getElementById("demo");
function display(value) {
tag.innerHTML = value;
}
let toldThePeople = "BBQ Cauliflower";
let restaurantOrder = new Promise((resolve, reject) => {
let order = "BBQ Corn";
if (toldThePeople === order) {
resolve("Mmm, You guys did an awesome job!");
} else {
reject("I WANT THE MANAGER!!!");
}
});
// ✅ 链式调用：then 处理 resolve，catch 处理 reject
restaurantOrder
.then(display) // 等价于 .then(value => display(value))
.catch(display) // 关键：必须显式捕获 reject
.finally(() => {
console.log("Order processing completed."); // 可选：统一收尾逻辑
});
</script>? 进阶建议：
- 使用 async/await 提升可读性（尤其在多步骤异步流程中）：
async function handleOrder() { try { const result = await restaurantOrder; display(result); } catch (error) { display(error); } } handleOrder(); - 在开发阶段务必开启浏览器开发者工具的 Console 面板，未捕获的 Promise rejection 会在此清晰报错，是快速定位问题的第一线索。
- 若需区分错误类型（如网络错误 vs 业务校验失败），可在 catch 中判断 error instanceof Error 或自定义错误类。
总结：Promise 不是“自动运行”的黑盒，而是严格遵循 pending → fulfilled/rejected 状态机。写 .then() 必须配 .catch()（或 try/catch），否则失败即静默——这不是 Bug，而是设计使然。 掌握这一原则，才能真正驾驭异步流控。
