当我们在微任务队列中返回一个值并从 then() 链返回一个 Promise.resolve 时会发生什么？

Question

在这里，我有一个简单解决的承诺。

let promise = new Promise((resolve,reject)=>{
    resolve("resolved");
});

当我在.then链中使用 Promise 作为返回值时，我的困惑就开始了：

promise.then(resolve=>{
    console.log(resolve);
    return Promise.resolve(2);
}).then(resolve=>{
    console.log(resolve);
});

promise.then(resolve=>{
    console.log(resolve)
    return 3;
}).then(resolve=>{
    console.log(resolve);
});

这些链的输出是： 1 1 3 2 我期望看到的： 1 1 2 3

但是如果我转身return Promise.resolve(2); 像这里一样return 2 ：

promise.then(resolve=>{
    console.log(resolve);
    return 2;
}).then(resolve=>{
    console.log(resolve);
});

promise.then(resolve=>{
    console.log(resolve)
    return 3;
}).then(resolve=>{
    console.log(resolve);
});

我会得到我认为我会得到的输出 (1 1 2 3)。

那么这里有没有人可以解释为什么输出会根据使用和不使用Promise.resolve() ？

顺便说一句，我问这个问题只是出于纯粹的学术原因！

Answer 1

Promise 的then s 在微任务期间解析。 在.then ，如果您返回一个普通值，例如 2 或 3，则链接到它的下一个.then将在下一次调用堆栈清除时运行。 但是如果你返回一个 Promise，它必须先被解包，然后才能继续下一个.then 。

在您的第一个代码中，一旦调用堆栈清晰，第一个微任务就会运行。 他们中的一个“解开”的Promise.resolve(2)和队列起来.then在microtask队列回调。 相比之下， 3不需要解包，所以它的.then立即运行，无需等待，记录 3。

所述microtask队列的顶部的任务是，则2的.then ，记录2。

所有这一切都说，在实际代码中，你不应该依赖这种时间，因为它有点令人困惑——如果这是一个问题，最好重新构建代码，这样就不用担心了。

Answer 2

因为您在情况 1 中返回一个新的 Promise，它将在下一个tick得到解决。

每次搜索微任务 Q 时，Q 中的承诺都会得到解决（不仅是承诺，而且这与这个问题相关）。 在情况 1 中，您同时得到Promise.resolve(2)解决resolve=>{ console.log(resolve) return 3; } resolve=>{ console.log(resolve) return 3; }得到解决。

现在你的下一个微 Q 在 Q 上有Promise.resolve(2)的封闭承诺。这增加了两种情况之间的延迟。