JavaScript Promise 未显示结果的解决方案

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() 的回调完全被跳过，且未设置错误处理，导致信息“消失”——既不渲染，也不报错（在非严格模式下甚至不会在控制台抛出未捕获异常）。

Spacely AI

为您的房间提供AI室内设计解决方案，寻找无限的创意

下载

立即学习“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 加载完成后执行（当前代码位于