整天困扰着我的javascript Promise问题

如何解决整天困扰着我的javascript Promise问题

此代码如何工作？

new Promise(resolve => {
    new Promise(resolve1 => {
        console.log(1)
        resolve1()
      })
      .then(() => {
        console.log(2)
      })
      .then(() => {
        console.log(3)
      })
    resolve()
  })
  .then(() => {
    console.log(4)
  })

结果为“ 1 2 4 3”

解决方法

最容易理解Promises会发生什么，就是尽可能多地解除链接。

因此，在这种情况下，我们必须记住Promise构造函数是同步运行的，微任务被推入队列（FIFO），并且只有当我们用{{1 }}将解决，使我们的回调将被推送到该队列。

所以我们可以这样重写您的代码段：

.then()

,

// Defining new promise 1
new Promise(resolve => {
    // Defining new promise 2
    new Promise(resolve1 => {
        // print 1
        console.log(1)
        // Resolve promise 1
        resolve1()
    })
        .then(() => {
            // After resolve 1 (then method),print 2
            console.log(2)
        })
        .then(() => {
            // Here we see chain of then methods,so after then 1
            // print 3. But keep in mind,that we also resolves
            // promise 1 before then of promise 2 actually happens,// so now JS doing it's own "parallel" tasks
            // (task/microtask pool,event loop)
            console.log(3)
        })
    // Resolve promise 1
    // BEFORE then from promise 2 completed
    resolve()
})
.then(() => {
    // This then method print 4
    console.log(4)
})

您可以通过添加async / await

来更改此代码并使之异步

// Defining new promise 1
new Promise(async (resolve) => {
    // Defining new promise 2
    await new Promise(resolve1 => {
        // print 1
        console.log(1)
        // Resolve promise 1
        resolve1()
    })
        .then(() => {
            // After resolve 1 (then method),print 2
            console.log(2)
        })
        .then(() => {
            // chain then,prints 3 after first then
            console.log(3)
        })
    // Resolve promise 1
    // AFTER promise 2 complete its then
    resolve()
})
.then(() => {
    // This then method print 4
    console.log(4)
})

,

首先，执行顶层代码：

通过执行，两个功能被添加到微任务队列（红色点）。然后，执行微任务队列：

将一个功能添加到微任务队列中，然后执行该微任务队列中的功能：

结局。

,

它们是两个单独的promise，并且无论您按什么顺序排列都将并行执行。如果希望获得1、2、3、4的顺序，则必须正确地将它们链接在一起或将它们与Promise.all例如

let outerPromise,innerPromise;

outerPromise = new Promise(resolve => {
    innerPromise = new Promise(resolve1 => {
        console.log(1)
        resolve1()
      })
      .then(() => {
        console.log(2)

      })
      .then(() => {
        console.log(3)
      })
    resolve()
  })
  .then(() => {
    Promise.all([outerPromise,innerPromise]).then(() => console.log(4));
  });

这里是阅读诺言链的好资源-> https://javascript.info/promise-chaining

,

只要调用“ resolve（）”即可完成承诺。

JavaScript函数调用也不会阻塞，这意味着当您对某物执行.then时，然后再进行另一个调用，将首先执行第二个调用，然后是第一个调用。与setTimeout等类似的想法

这里

    new Promise(resolve1 => {
        console.log(1)
        resolve1()
    })
        .then(() => {
            console.log(2)
        })
        .then(() => {
            console.log(3)
        })
    resolve()

您首先声明一个新的Promise，该Promise本质上不会控制台记录任何内容（除了1）'，该记录仅在.then调用中发生，如前所述，该调用是在（某些）常规函数调用之后执行的然后 然后，您要跟随它的主要解析，并输出4。尽管如此，console.log需要花费一些时间来操作，因此即使2已被控制台记录，但4之前没有足够的时间来记录3。 ，它不依赖于等待诺言链，已被打印

问题？

,

因为要在第三个resolve()被呼叫之前呼叫.then()。

它像这样执行...

new Promise(resolve => {
    new Promise(resolve1 => { // okay. we're not waiting. let's keep moving
        console.log(1)
        resolve1(); // oh,yay! let's call .then()
      })
      .then(() => {
        console.log(2) // nothing was returned! let's call .then()
      })
      .then(() => {
        console.log(3) // nothing was returned! let's call .then()
      });
    // this is the next thing to be called after new Promise(resolve1 ...)
    // it will be called almost at the exact same time that resolve1() is called
    resolve(); oh,yay! let's call .then()
  })
  .then(() => {
    console.log(4)
  })