NodeJs 和浏览器之间的 Promise 输出不同

Question

以下代码块在 Node 和浏览器之间的执行方式不同。当然，存在不同的环境、不同的处理时间和竞争条件的可能性。但是根据我对 Promises 的理解，这段代码在环境之间应该是一致的。

我期待 Chrome/浏览器的结果。我不期望 NodeJs 的结果。我不明白为什么每个newPromise 的then 链都没有完成之前masterPromise 的then 链继续。换句话说，因为一个新的 Promise 在一个 then fn 中返回到 masterPromise 承诺链，我希望新的 Promise 的 then 链在 masterPromise 承诺链恢复之前完成。

如果有人可以在以下实现中戳一个洞，并解释为什么 NodeJs 结果是有效的，我会很高兴！

使用 chrome 44 和节点 12.6。

例如：

'use strict';
var masterPromise = Promise.resolve();
var numbers = [ 1, 2, 3 ];

// function returns a new promise that fulfills in 100ms
// it logs two bits of information--one pre-resolve, & one post-resolve.
// because a `.then` is registered immediately, before the promised is
// fulfilled, i would expect the post-resolve console.log to be logged before
// any other logging
var returnNewPromise = function(number) {
    var resolve;
    var newPromise = new Promise(function(r) { resolve = r; });
    newPromise.then(function() { console.log('registered ' + number + ' (verbatim, syncronous echo)'); });
    setTimeout(function() {
        console.log('registered ' + number);
        resolve();
    }, 100);
    return newPromise;
};

numbers.forEach(function(number) {
    var getChildPromise = function(number) {
        return returnNewPromise(number);
    };
    return masterPromise.then(function() {
        return getChildPromise(number);
    });
});

节点：

registered 1
registered 2
registered 3
registered 1 (verbatim, syncronous echo)
registered 2 (verbatim, syncronous echo)
registered 3 (verbatim, syncronous echo)

铬：

registered 1
registered 1 (verbatim, syncronous echo)
registered 2
registered 2 (verbatim, syncronous echo)
registered 3
registered 3 (verbatim, syncronous echo)

Answer 1

我不明白为什么每个newPromise 的then 链不是 完成之前masterPromise 的then 链继续。一个新的 Promise 在 then 中返回到 masterPromise promise-chain fn，所以它不应该在 masterPromise 之前等待吗 承诺链恢复了吗？

没有。看来您的误解是关于“masterPromise 链”：没有这样的东西。
你有一个masterPromise，然后你从它链接了三个不同的then 调用。当masterPromise 解析（立即）时，它会看到 3 个回调并按照注册顺序调用所有这些回调。它不关心这些回调做什么，它们是否是异步的，并且不等待它们的承诺结果。在您的情况下，它们都创建了 Promise，并通过它们推进了它们的子链，但是这 3 个子链彼此完全独立。

也许用更具描述性的日志来充实你的代码有助于理解你在做什么：

function delay(number) {
    console.log("creating promise for", number);
    return new Promise(function(resolve) {
        setTimeout(function() {
            console.log('resolving promise with', number);
            resolve(number);
        }, 100);
    });
};
function result(n) {
    console.log("received", number);
}

var masterPromise = Promise.resolve();

masterPromise.then(function(){ delay(1).then(result); }); // chain 1
masterPromise.then(function(){ delay(2).then(result); }); // chain 2
masterPromise.then(function(){ delay(3).then(result); }); // chain 3
console.log("created chains");

您将在此处看到的日志是

// .then chain 1    -------,
// .then chain 2    ------- \ -,
// .then chain 3    -------- \ -\ -,
created chains                |  |  |
                              |  |  | 3 then callbacks in the order they were registered
creating promise for 1      <´   |  |
// setTimeout 100   -----,       |  |
                          \     /   |
creating promise for 2     | <-´    |
// setTimeout 100   ------ |-,      /
                           |  \    /
creating promise for 3     |  | <-´
// setTimeout 100   ------ |- |-,
                           |  |  \
…                          |  |  | 3 timeout callbacks in the order they were scheduled
                           |  |  |
resolving promise with 1 <´   |  |
// resolve()                  |  |
[…]                           /  |
resolving promise with 2  <-´    |
// resolve()                     /
[…]                             /
resolving promise with 3   <---´
// resolve()
[…]

在这里我们可以看到 3 个（独立的）resolve() 调用发生。他们将尽快安排各自的回电 (result)。这就是 node 和 Chrome 之间的区别：前者确实在同一滴答声中同时执行超时回调（它们是在同一时间安排的，具有相同的超时时间），而 Chrome 使用单独的滴答声。所以在 node 中，“asap”在三个回调之后，而在 Chrome 中它在它们之间。两种实现都很好。

Answer 2

我不明白为什么每个 newPromise then 链在解析后都没有立即执行

then-callbacks 不会立即调用。

var resolve;
new Promise(function (r) { resolve = r; })
    .then(function () { console.log(2); });
resolve();
console.log(1);

日志：

1
2

Promise 解析的行为类似于 setTimeout，延迟为零。

更新：

由于限制，与setTimeout 的比较并不完全正确： https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout#Minimummaximum_delay_and_timeout_nesting 相似之处在于异步类型的 Promise。

更新2：

-----------+------------
wait       |  resolved
-----------+------------
timeout1   |             initial state
timeout2   |
-----------+------------
           | timeout1    after 100 ms
timeout2   |
-----------+------------
           | resolve1    then Chrome variant
           | timeout2
-----------+------------
           | timeout2    or Node variant
           | resolve1
-----------+------------

两种变体均符合规范。似乎 Chrome 队列会在后续超时回调之前解析回调。