Javascript Promise 和事件循环答案

【问题标题】：Javascript Promise & event loopJavascript Promise 和事件循环
【发布时间】：2021-09-24 17:39:43
【问题描述】：

我尝试在 Chrome 上运行以下代码，得到了意想不到的结果。

<script>
    let p = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('OK');
        }, 1000)
    })
    console.log(p);
</script>

Chrome 控制台上打印的 Promise 对象是 enter image description here。（状态='完成'，结果='OK）

但是在 VScode 控制台上打印的 Promise Object 是 enter image description here。（状态='待定'，结果=未定义）

根据我对 JS 事件循环的了解，由于 setTimeout() 是异步的，所以在同步代码完成之前不会执行代码 'resolve('OK')'。

所以我认为 VScode 结果是我应该期待的，对吧？但是是什么导致 Chrome 和 VScode 的结果不同呢？谢谢^^

【问题讨论】：

您是否要等到异步函数中的超时完成后再做某事？
Chromes 控制台未立即评估。单击它时会对其进行评估。所以你在解决后检查它。

标签： javascript asynchronous concurrency promise

【解决方案1】：

请注意 Chrome 控制台上的 console.log 会显示变量的最新版本

这不一定与程序实际运行时的值相同。

所以我们遇到了这种奇怪的情况。在 Chrome 控制台中试试这个。

let p = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('OK');
    }, 1000)
})
console.log("Value at time of running", JSON.stringify(p))
console.log("Value at time of seeing", p);

我看到的是下面。我正在粘贴它，因为我无法通过 Stack Overflow 的“sn-p”功能重现它。

这是什么意思

第二个console.log 产生了令人困惑的外观。它的摘要（带有向下的箭头）说它是pending。但它的详细信息，如下所示，它是fulfilled。

单击蓝色的“i”按钮会提供一些信息。我不能轻易地在这里复制和粘贴它，但它说的是“左边的东西是运行 console.log 时的样子；下面的东西是现在的样子。”

这些年来我已经习惯了这一点，但我不得不承认我并不明白为什么我们两者都有！

【讨论】：

【解决方案2】：

我猜在 vsc 中，promise 状态仍然处于等待状态，因为 console.log() 在超时完成之前被触发，你可以试试这个


const waitForTimeout = () => new Promise(resolve => setTimeout(() => resolve('OK'), 1000);

(async function() {
   const promise = await waitForTimeout();
   console.log(promise);
})(); // self fulfilling function

【讨论】：