Javascript Promise 和事件循环

Question

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

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

Chrome 控制台上打印的 Promise 对象是 enter image description here。 (state='fulfilled', result='OK)

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

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

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

Answer 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 的“片段”功能重现它。

这是什么意思

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

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

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

Answer 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

Javascript Promise 和事件循环

Javascript Promise & event loop

javascript

concurrency

asynchronous

promise

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

这是什么意思