Promise（）中的执行顺序

Question

程序-1

new Promise(resolve => {
        resolve('1');
        Promise.resolve().then(() => console.log('2'));
    }).then(data => {
        console.log(data);
    }); // output 2 1

程序-2

new Promise(resolve => {
        Promise.resolve().then(() => {
            resolve('1');
            Promise.resolve().then(() => console.log('2'));
        });
    }).then(data => {
        console.log(data);
    }); // output 1 2

我对这两个程序的输出确实感到困惑。谁能告诉我这里的执行线程如何工作？

Answer 1

很难理解的是resolve的工作方式与return不同。创建Promises实际上会创建一个新的异步上下文。 Promise的第一个功能内的所有内容均同步执行。然后使用同步或异步解析的值调用.then()方法。

[在第一个示例中，您解析了'1'，但是随后使用Promise创建了一个新的Promise.resolve()，然后立即调用了.then()。因为新的Promise在第一个内部，所以所有内容都被同步调用。

new Promise(resolve => {
        resolve('1'); // Will be accessed in the .then() after then end of the callback
        Promise.resolve().then(() => log('2')); // called before the end of the function 
                                               // because the context is not yet created
    }).then(data => {
        log(data);
    }); // output 2 1

第二个例子要难得多。您实际上是在第一个Promise内创建一个Promise并立即调用它的resolve。执行顺序为：

• 初始回调中的第一件事
• 之后，从eventListeners到resolve创建.then的种类>
• [当调用resolve时，在.then中执行回调

嵌套promise的初始函数中没有任何内容。因此它直接进入then。 .then()调用初始的resolve()。在这里，创建了eventListener的种类，因此我们跳至初始回调。然后，我们返回并执行其余功能。

new Promise(resolve => {
        // Because we call resolve right away, the context of the original promise
        // is created
        Promise.resolve().then(() => {
            resolve('1'); // Calling resolve jumps us to the .then
            Promise.resolve().then(() => log('2')); // We execute after.then
        });
    }).then(data => {
        log(data);
    }); // output 1 2
如果删除了.resolve()，它将像第一个一样工作：

new Promise(resolve => {
        new Promise(() => {
            resolve('1');
            Promise.resolve().then(() => log('2'));
        });
    }).then(data => {
        log(data);
    }); // output 2 1