嵌套的Promise执行顺序

Question

我正在阅读关于嵌套promise的内容，并在教程中遇到了这个编码挑战。有人能解释一下这段代码的执行顺序吗？

new Promise((resolve) => {
    new Promise((res) => {
        console.log("c");
        resolve(3);
        res(2);
    }).then((response) => console.log(response))
}).then((res) => console.log(res));

我运行了这段代码，输出结果是：

c
2
3

但是我本来期望输出结果应该是：

c
3
2

因为外部的promise先被解析，然后内部的promise稍后被解析。

Answer 1

除了Nicholas的答案之外，你可能被标识符'res'的重复使用所困扰。在内部Promise中的第一次使用是作为回调函数，它将值2返回给Promise。 最后一行中的第二次使用是在不同的作用域中，并且用作外部Promise的.then()方法的参数名。 如果你将最后一行中的'res'替换为'outerPromiseResult'，可能会有所帮助，以澄清事情。

Answer 2

简而言之，这是因为您调用.then的顺序。

new Promise((resolve) => {
    new Promise((res) => {
        console.log("c");
        resolve(3);
        res(2);

在上面的代码中，我们进入了外部构造函数，它立即调用外部函数。然后创建内部Promise，调用内部函数。内部函数记录“c”，然后将外部Promise解析为3，然后将内部Promise解析为2。

所以此时我们有2个已解析的Promise，但没有尝试使用它们的代码。

}).then((response) => console.log(response))

完成构造内部Promise后，我们在内部Promise上调用.then。由于Promise已解析，这会排队一个微任务来运行。

}).then((res) => console.log(res));

完成构造外部Promise后，我们在外部Promise上调用.then。由于Promise已解析，这会排队一个微任务来运行。

现在我们已经完成了所有同步代码的运行。调用堆栈为空，微任务开始运行。这些按照先进先出的顺序执行，所以与内部Promise相关的微任务首先运行，记录2。然后运行剩余的微任务，记录3。