如何理解此Promise执行顺序? [英] How to understand this Promise execution order?

问题描述

我不明白为什么这段代码会产生这样的顺序?有人可以详细说明吗?我以为Promises就像一个FIFO队列，但是嵌套的Promise函数似乎有点不可预测，还是使用其他数据结构?

I don’t understand why this piece of code results in such an order? Could anyone elaborate on this? I thought Promises were like a FIFO queue, but the nested Promise functions seems a little bit unpredictable, or maybe using some other data structure?

new Promise(resolve => {
    resolve()
  })
  .then(() => {
    new Promise(resolve => {
        resolve()
      })
      .then(() => {
        console.log(1)
      })
      .then(() => {
        console.log(2)
      })
      .then(() => {
        console.log(3.1)
      })
  })
  .then(() => {
    console.log(1.1)
    new Promise((resolve => {
        resolve()
      }))
      .then(() => {
        new Promise(resolve => {
            resolve()
          })
          .then(() => {
            console.log(4)
          })
          .then(() => {
            console.log(6)
          })
      }).then(() => {
        console.log(5)
      })
  }).then(() => {
    console.log(3)
  })
console.log(0)

输出:

0
1
1.1
2
3
3.1
4
5
6

推荐答案

承诺是异步的.这意味着每次您创建新的Promise时，新的异步操作就会开始.

Promises are async. This means everytime you create a new promise- a new async operation starts.

什么是JS中的异步操作?首先，您需要了解无论您做什么，JS都在单线程上运行.因此，为了使其看起来像异步的，有一个叫做(将注释的链接链接到原始帖子，tnx @Taki作为重要来源).

What is async operation in JS? First you need to understand that JS operates on a single thread no matter what you do. So, to make it looks like its asynchronous- there is something called the "event loop" (took the link from comment to original post, tnx @Taki for the great source).

通常，事件循环在主代码动作之间的动作中存储所有异步功能和清单".这确实是过于简化的解释，请参阅链接以了解更多信息，但这就是要点.

In general, the event loop stores all the async functions and "slips" in the actions between the main code actions. This is really over-simplified explanation, refer to the link to read more, but thats the gist of it.

因此，基本上，这里没有"FIFO"队列-异步功能的顺序实际上取决于诸如处理器速度，操作系统等之类的东西.

So basically, there is no "FIFO" queue here- the async functions order is literally depends on stuff like your processor speed, your operating system, etc.

但是，有一种方法可以确保仅在另一个异步操作完成后才执行一个异步操作，这就是 .then 子句.事实是，它仅确保中的特定功能.然后将在连接到其的特定承诺后执行，但是在其他异步操作中它没有说明任何顺序(承诺)在事件循环中.例如，在您的代码中:

BUT- there is a way to make sure one async action does get performed only after another one finishes, and this is the .then clause. The thing is, it only assures the specific function inside the .then will be performed after the specific promise it was concatenated to, but it does not say anything about the order of it in regars to other async operations (promises) in the event loop. So for example in your code:

new Promise(resolve => {
    resolve() // PROMISE A
  })
  .then(() => {
    new Promise(resolve => {
        resolve() // PROMISE B
      })
      .then(() => {
        console.log(1) //PROMISE C
      })
      .then(() => {
        console.log(2)
      })
      .then(() => {
        console.log(3.1)
      })
  })
  .then(() => {
    console.log(1.1) // PROMISE D
    new Promise((resolve => {
        resolve()
      }))

我参加了其中的一部分来解释:

I took part of it to explain:

因此，承诺A首先解决.这确保了承诺B将立即解决.这是事情变得复杂的时候:由于承诺B已解决，因此承诺C和D现在都进入了事件循环！为什么?因为Promise A有2个 .then 子句，所以当第一个结束时，事件循环采用了第二个，即诺言D.但是第一个 .then 子句也有一个他自己的 .then 子句-承诺C，它也会进入事件循环.

so, Promise A resolves first. this assures that promise B will resolve now. here is when things gets complicated: since promise B is resolved, both promise C and D now get into event loop! why? because Promise A had 2 .then clauses, so when the first one ends- event loop takes the 2nd one which is promise D. but the first .then clause had also a .then clause of his own - promise C, which also enters the event loop.

承诺D和C之间没有连接！它们可以以任何顺序执行.保持该逻辑，您将看到其余承诺的工作原理，并且如果尝试在不同的OS上运行它，则由于事件循环的OS的实现方式不同，承诺顺序可能会有所不同.

THERE IS NO CONNECTION BETWEEN PROMISE D AND C! They could be performed in any order. keep that logic and you'll see how it works out for the rest of the promises, and also if you try to run it on different OS it might be that promises order will be different because of different implementations of the OS for the event loop.

希望这对您有所了解.

免责声明 :我在JS方面没有太多经验，但是Promise确实吸引了我，因此我对此进行了深入研究.我站在我在这里写的所有内容的背后，但是如果我的解释有任何更正，我很想听听！

DISCLAIMER: I have not much experience in JS, but promises really intrigued me so I did a deep research about it. I'm standing behind everything I wrote here, but if there are any corrections to my explanation I'd love to hear!

编辑

我下面的答案也是正确的，但没有任何解释，所以让我补充一下:当您在promise(或 .then 子句，也返回promise)中不返回任何内容时，它将隐式返回一个没有价值的已解析promise，然后再退出promise，就像添加例如，在promise C中的 console.log 之后，返回新的Promise.resolve().当这样完成后，所有在诺言B之后的 .then 子句只会在前一个结束后才进入事件循环(例如b结束，因此C进入循环，然后进入下一个.then 等)，但在它们之间也可以输入其他承诺或 .then 子句(如承诺D).

The answer beneath me is also correct but with no explanation, so let me add to it: When you do not return anything inside a promise (or a .then clause, which also returns a promise), it will implicitly return a resolved promise with no value before going out of the promise, basically like adding a return new Promise.resolve() after teh console.log in promise C, for example. When its done like this, all the .then clauses coming after promise B will only enter the event loop after the previous one ended (e.g b ends, so C goes into loop, then the next .then and so on), but between them other promises or .then clauses (like promise D) can enter as well.

但是，当您返回链接有 .then 子句的诺言时，它会确保诺言+ then子句的整个块按顺序进入事件循环，因此 .then 子句也将按照您想要的顺序执行:)

But, when you RETURN the promise that has the .then clauses chained to it- it makes sure the whole block of the promise + then clauses goes into event loop as one in order, so the .then clauses will also be performed in the order you wanted :)

tnx @Eugene Sunic！

tnx @Eugene Sunic for the addition!

这篇关于如何理解此Promise执行顺序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！