了解已解析的promise的后续then（）处理程序的执行顺序 [英] Understanding the execution order of subsequent then() handlers of an resolved promise

问题描述

我正在学习Promise，为了理解它我读了一些关于JavaScript的事件循环。这篇文章简要介绍了事件循环的工作，如调用堆栈，事件表和消息队列。

I am learning Promise, in order to understand it I read a bit about Event loop of JavaScript. This article briefly introduced the working of event loop such as call stack, event table and message queue.

但是我不知道调用堆栈如何处理包含'return'的行，以及之后会发生什么。
下面是我写的一个例子，希望了解Promise如何基于事件循环工作。另请参阅 http://jsbin.com/puqogulani/edit?js,console if你想试一试。

But I don't know how the call stack deal with the line containing 'return', and what happens thereafter. Below is an example that I wrote to hopefully understand how Promise works based on event loop. Also see http://jsbin.com/puqogulani/edit?js,console if you want to give it a go.

var p1 = new Promise(
  function(resolve, reject){
    resolve(0);
});

p1.then(function(val){
  console.log(val);
  p1.then(function(){
    console.log("1.1.1");
    p1.then(function(){
      console.log("1.1.2");
      p1.then(function(){
        console.log("1.1.3");
      });
    });
  });

  p1.then(function(){
    console.log("1.2");
  })

  return 30;

  //return new Promise(function(resolve, reject){
  //  resolve(30);
  //});

})
  .then(function(val){
  console.log(val/2);
});

p1.then(function(){
  console.log("2.1");
});

console.log("Start");

可以看出，有两个返回，使用它们每个都会给出不同的输出订购。具体来说，当使用返回30; 时， 1.1.2,1.1.3 在 15之后，但在使用时返回新的Promise（...）， 1.1.2,1.1.3 在 15 之前。那么当代码达到两个不同的'return'时究竟发生了什么呢？

As can be seen, there are two "return", using each of them will give a different output order. Specifically, when using return 30;, 1.1.2, 1.1.3 are after 15, but when using return new Promise(...), 1.1.2, 1.1.3 are before 15. So what exactly happened when the code reached two different 'return'?

推荐答案

差异在 http://promisesaplus.com/ 承诺解决程序。

第一个返回值：

2.3.3.4如果那时不是函数，请用x履行承诺。

2.3.3.4 If then is not a function, fulfill promise with x.

第二个：

2.3.2如果x是一个承诺，采用其状态[3.4]：

2.3.2 If x is a promise, adopt its state [3.4]:

2.3.2.2如果/当x满足时，履行承诺的价值相同。

2.3.2.2 If/when x is fulfilled, fulfill promise with the same value.

我们可以看到这实现了 q。 JS 。这是一种可能的实现，但似乎可以解释延迟：

We can see this implemented q.js. This is one possible implementation but seems to explain the delay:

function coerce(promise) {
    var deferred = defer();
    Q.nextTick(function () {
        try {
            promise.then(deferred.resolve, deferred.reject, deferred.notify);
        } catch (exception) {
            deferred.reject(exception);
        }
    });
    return deferred.promise;
}

从返回承诺时函数，我们有两个单独的promise对象：从传递给然后的函数返回的一个，以及从返回的那个然后。这些需要连接在一起，以便解决第一个，解决第二个。这是通过 promise.then（deferred.resolve，...）来完成的。

When returning a promise from the then function, we have two separate promise objects: the one returned from the function passed to then, and the one returned from then. These need to be connected together so that resolving the first, resolves the second. This is done with promise.then(deferred.resolve, ...)

第一个延迟来自 Q.nextTick 。这将在事件循环的下一次迭代中执行该函数。 提交评论讨论了为什么需要它。

The first delay comes from Q.nextTick. This executes the function on the next iteration of the event loop. There's some discussion in the commit comments on why it's needed.

调用 promise.then 添加事件循环的一次迭代的进一步延迟。根据规范的要求：

Calling promise.then adds a further delay of one iteration of the event loop. As required in the spec:

2.2.4 onFulfilled或onRejected在执行上下文堆栈仅包含平台代码之前不得调用。 [3.1]。

2.2.4 onFulfilled or onRejected must not be called until the execution context stack contains only platform code. [3.1].

执行将类似于：

p1.then with function containing 1.1.1 is called
    function containing 1.1.1 is queued
p1.then with function containing 1.2 is called
    function containing 1.2 is queued
Promise resolving to 30 is returned
    Q.nextTick function is queued
----------
1.1.1 is printed
p1.then with function containing 1.1.2 is called
    function containing 1.1.2 is queued
1.2 is printed
Q.nextTick function is executed
    promise.then(deferred.resolve, ...) is queued
----------
1.1.2 is printed
p1.then with function containing 1.1.3 is called
    function containing 1.1.3 is queued
promise.then(deferred.resolve, ...) is executed
    function containing val/2 is queued
----------
1.1.3 is printed
val/2 is printed

这篇关于了解已解析的promise的后续then（）处理程序的执行顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！