关于Promise的执行顺序问题?


为什么这俩个执行顺序还不一样。并且第二张图10为什么会在2后面出现,难道底层做了两次微任务?

阅读 1.9k
2 个回答

Promise.resolve()与new Promise(r => r(v))
可以参考这篇文章

    // v是一个实例化的promise,且状态为fulfilled
    let v = new Promise(resolve => {
      console.log("begin");
      resolve("then");
    });

    // 在promise里面resolve一个状态为fulfilled的promise

    // 模式一 new Promise里的resolve()
    // begin->1->2->3->then->4 可以发现then推迟了两个时序
    // 推迟原因:浏览器会创建一个 PromiseResolveThenableJob 去处理这个 Promise 实例,这是一个微任务。
    // 等到下次循环到来这个微任务会执行,也就是PromiseResolveThenableJob 执行中的时候,因为这个Promise 实例是fulfilled状态,所以又会注册一个它的.then()回调
    // 又等一次循环到这个Promise 实例它的.then()回调执行后,才会注册下面的这个.then(),于是就被推迟了两个时序
    new Promise(resolve => {
      resolve(v);
    }).then((v)=>{
        console.log(v)
    });

    //  模式二 Promise.resolve(v)直接创建
    // begin->1->then->2->3->4 可以发现then的执行时间正常了,第一个执行的微任务就是下面这个.then
    // 原因:Promise.resolve()API如果参数是promise会直接返回这个promise实例,不会做任何处理
/*     Promise.resolve(v).then((v)=>{
        console.log(v)
    }); */

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

sec-promise-resolve

当 Promise.resolve 的参数也是一个 Promise 的时候,会同步的直接返回这个参数。

也就是说,Promise.resolve(Promise.resolve(10)).then 跟 Promise(10).then 是一样的。

推荐问题
宣传栏