事件处理程序中resolve Promise时then回调提前执行的原因是什么

问题原因 #

问题出在then()方法的传参逻辑上：then()要求接收函数类型的回调参数，只有当Promise状态变为resolve时，才会执行传入的这个回调函数。而你在代码里直接写了console.log("Accept button clicked")，属于直接执行函数调用，代码走到这一行时就会立刻触发打印，再把console.log的返回值（undefined）传给then()，自然不会等到弹窗按钮被点击、Promise被resolve之后才执行打印。

修正方案 #

把要执行的逻辑包裹成匿名函数传给then()即可，修改后的代码如下：

window.onload = () => {
  const alert = document.querySelector(".alert");
  alert.addEventListener("click", () => {
    display_modal("Alert", "Important message", "Accept").then(() => {
      console.log("Accept button clicked");
    });
  });
}

也可以用async/await语法让逻辑更易读：

window.onload = () => {
  const alert = document.querySelector(".alert");
  alert.addEventListener("click", async () => {
    await display_modal("Alert", "Important message", "Accept");
    console.log("Accept button clicked");
  });
}

内容的提问来源于stack exchange，提问作者Pavel Skipenes