Promise执行顺序

这段代码执行后，分别打印出来什么？

let v = new Promise(resolve => {
      console.log("begin");
      resolve("then");
  });
new Promise(resolve => {
      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);
})

答案：

begin
1
2
3
then
4

刚开始看这个问题的时候这个 then和4的顺序很让我迷惑。
后来看了很多文章，这里resolve(v), v是一个promise属于thenable对象。当resolve一个promise时，v8会创建一个promiseResolveThenableJob，这又是一个microtask，消耗一个then时序。

new Promise(resolve => {
      // v是一个thenable
      resolve(v);
    }).then((v)=>{
        console.log(v)
});
//  执行起来相当于，有两个then往后推了两个微任务。（因为只有promise内部状态是resolved才会将后面的then推入微任务队列中）
new Promise(resolve => {
      Promise.resolve().then(()=>{
            v.then(resolve)
      })
    }).then((v)=>{
        console.log(v)
});


var a = Promise.resolve(true)
//same as
var a = new Promise(function(resolve,reject){
    //立即变成成功状态
    resolve(true)
})

var b = Promise.reject(true)
//same as
var b = new Promise(function(resolve,reject){
    //立即变成失败状态
    reject(true)
})

在 Promise 中 resolve 一个 Promise 实例解析：

由于 Promise实例是一个对象，其原型上有 then 方法，所以这也是一个 thenable 对象。
同样的，浏览器会创建一个 PromiseResolveThenableJob 去处理这个 Promise 实例，这是一个微任务。
在PromiseResolveThenableJob 执行中，执行了 Promise.prototype.then，而这时 Promise 如果已经是 resolved 状态，then 的执行会再一次创建了一个微任务

最终结果就是：额外创建了两个Job，表现上就是后续代码被推迟了2个时序

对于 new Promise(resolve => resolve(thenable))，即“在 Promise 中 resolve 一个 thenable 对象”，需要先将 thenable 转化为 Promsie，然后立即调用 thenable 的 then 方法，并且这个过程需要作为一个 job 加入微任务队列，以保证对 then 方法的解析发生在其他上下文代码的解析之后。

let thenable = {
  then(resolve, reject) {
    console.log('in thenable');
    resolve(100);
  }
};

new Promise((r) => {
  console.log('in p0');
  r(thenable);
})
.then(() => { console.log('thenable ok') })

new Promise((r) => {
  console.log('in p1');
  r();
})
.then(() => { console.log('1') })
.then(() => { console.log('2') })
.then(() => { console.log('3') })
.then(() => { console.log('4') });

执行顺序：

in p0
in p1
in thenable
1
thenable ok
2
3
4

解析：

in thenable 后于in p1 而先于1 输出，同时 thenable ok 在 1 后输出
在执行完同步任务后，微任务队列中只有2个微任务：第一个是转换thenable为Promise的过程，即 PromiseResolveThenableJob，第二个是 console.log('1')
在PromiseResolveThenableJob执行中会执行 thenable.then()，从而注册了另一个微任务：console.log('thenable ok')
正是由于规范中对 thenable 的处理需要在一个微任务中完成，从而导致了第一个 Promise 的后续回调被延后了1个时序

参考：令人费解的 async/await 执行顺序里面有些执行不太对需要自己check一下
测试: https://segmentfault.com/a/1190000022805523

https://segmentfault.com/a/1190000022805523

let thenable = {
    then: function(resolve, reject) {
        console.log(222)
        resolve(444);
    }
};
const p1 = new Promise((resolve,reject)=>{
    console.log(111);
    resolve(333)
}) 
p1.then((val)=>{
    console.log(val)
}).then(()=>{
    console.log(555)
})
let p2 = Promise.resolve(thenable);
p2.then(function(value) {
    console.log(value);  
});

再来一个测试一下，输出是 111,333,222,555,444,666

再来一个await

async function async1() {
    console.log('async1 start')
    await async2()
    console.log('async1 end')
}
    
async function async2() {
    console.log('async2')
}
    
console.log('script start')

setTimeout(function () {
    console.log('setTimeout')
}, 0)
    
async1();
    
new Promise(function (resolve) {
    console.log('promise1')
    resolve()
}).then(function () {
    console.log('promise2')
})
    
console.log('script end')

答案:

script start
async1 start
async2
promise1
script end
async1 end
promise2
setTimeout

梳理下await函数的执行时机，我们可以看看这篇文章：《「译」更快的 async 函数和 promises》，下面引入其中的一些描述：

简单说，await v 初始化步骤有以下组成：

把 v 转成一个 promise（跟在 await 后面的）。

绑定处理函数用于后期恢复。

暂停 async 函数并返回 implicit_promise 给调用者。

我们一步步来看，假设 await 后是一个 promise，且最终已完成状态的值是 42。然后，引擎会创建一个新的 promise 并且把 await 后的值作为 resolve 的值。借助标准里的 PromiseResolveThenableJob 这些 promise 会被放到下个周期执行。

结合规范和这篇文章，简单总结一下，对于 await v：

await 后的值 v 会被转换为 Promise
即使 v 是一个已经 fulfilled 的 Promise，还是会新建一个 Promise，并在这个新 Promise 中 resolve(v)
await v 后续的代码的执行类似于传入 then() 中的回调
如此，可进一步对原题中的 async1 作等价转换。

function async1(){
  console.log('async1 start')
  return new Promise((resolve,reject)=>{
      resolve(async2())
  }).then(() => {
      console.log('async1 end')
  });
}

即await下面的代码被拖到了微任务队列中。

// 扔个其他示例
function fn(){
    console.log(1);
    
    setTimeout(() => {
        console.log(2);
        Promise.resolve().then(() => {
            console.log(3)
        });
    });
    
    new Promise((resolve, reject) => {
        console.log(4)
        resolve(5)
    }).then((data) => {
        console.log(data);
        // 这里持续推进微任务队列。。容易搞错= =
        Promise.resolve().then(() => {
            console.log(6)
        }).then(() => {
            console.log(7)
            setTimeout(() => {
                console.log(8)
            }, 0);
        });
    })
    setTimeout(() => {
        console.log(9);
    })
    console.log(10);
}
fn();



// 输出
1,4,10,5,6,7,2,3,9,8

再来几个

function fn(){
    console.log(1);
    setTimeout(() => {
        console.log(2);
        Promise.resolve().then(() => {
            console.log(3)
        });
    });
    new Promise((resolve, reject) => {
        console.log(4)
        resolve(5)
    }).then((data) => {
        console.log(data);
        Promise.resolve().then(() => {
            console.log(6)
        }).then(() => {
            console.log(7)
            
            setTimeout(() => {
                console.log(8)
            }, 0);
        });
    })
    
    setTimeout(() => {
        console.log(9);
    })
    
    console.log(10);
}
fn();

// 1,4,10,5,6,7,2,3,9,8

console.log('run begin')
run()
console.log('run end')

async function run() {
  console.log(0)
  for (let i = 1; i <= 5; i++) {
    await func1()
  }
}

async function func1() {
  console.log('func1 begin')
  await new Promise((resolve, reject) => {
    console.log('promise')
  })
  console.log('func1 end')
}

加一道测试题：

function fn(){
  console.log(1);
  
  setTimeout(() => {
      console.log(2);
      Promise.resolve().then(() => {
          console.log(3)
      });
  });
  
  new Promise((resolve, reject) => {
      console.log(4)
      resolve(5)
  }).then((data) => {
      console.log(data);
      Promise.resolve().then(() => {
          console.log(6)
      }).then(() => {
          console.log(7)
          setTimeout(() => {
              console.log(8)
          }, 0);
      });
  })
  
  setTimeout(() => {
      console.log(9);
  })
  
  console.log(10);
}
fn();
///1,4,10， 5，6,7，2,3,9,8

有疑惑可能就是在resolve(5)之后的then开始吧？下面的then回调是个微任务，当执行到then回调时我们打印· data 即 5·，之后一个promise.resolve为空，继续又是一个then我们将其推进微任务队列尾部，因为此时正在读取微任务队列并执行且此时里面只有个我们当当推入的函数要执行，所以我们将这个回调取出执行 console.log(6), 接下来又是一个then 再次将函数推进微任务队列尾部，之后在取出执行 console.log(7), 还有个setTimeout 将其推到宏任务队列，这部分就解释完毕啦

再来一个

setTimeout(function () {
  console.log('timeout1'); 
  
}, 1000);

async function f1 () {
  const a = await console.log('await1');
  console.log('await2') 
}

f1(); 

console.log('start');

Promise.resolve().then(function () {
  console.log('promise1'); 
  Promise.resolve().then(function () {
    console.log('promise2'); 
  });
  
  setTimeout(function () {
    Promise.resolve().then(function () {
      console.log('promise3'); 
    });
    console.log('timeout2') 
  }, 0);
  
});

console.log('done');

// 'await1' 
// 'start'
// 'done'
// 'await2'
// 'promise1'
// 'promise2'
// 'timeout1'
// 'timeout2'
// 'promise3'

这里其实就一个点，第一个settimeout要过1000ms之后才会放到我么宏任务队列里；也就是promise包含的settimeout优先被推入宏任务队列；导致了 timeout2优先输出；
只后await后面不是thenble所以先执行console.log('await1')之后将下面的await2要推入本次微任务队列并执行

 const a = await console.log('await1');
 console.log('await2') 
//等于
 const a = Promise.resolve(console.log('await1')).then(()=>{
   console.log('await2') 
})

再来一个

Promise.resolve().then(function() { 
    console.log('promise1');
}).then(function() {
    console.log('promise2');
}).then(function() {
  console.log('promise3');
}).then(function() {
  console.log('promise4');
}).then(function() {
  console.log('promise5');
})
async function errorFunc() {
    try {
        await Promise.reject('error!!!')
    } catch (e) {
        console.log(e)
    }
    console.log('async1');
    return Promise.resolve('async1 success')
}
errorFunc().then(res => console.log(res))
// promise1
// error!!!
// async1
// promise2
// promise3
// promise4
// async1 success
// promise5

在errorFunc中有两个点较为复杂，首先是await Promise.reject('error!!!')，await会将后面的代码转化为promise并将其resolve(reject)出去，errorFunc 相当于

new Promise((resolve,reject)=>{
  reject('error!!!') 
}).catch((e)=>{
    console.log(e)
    console.log('async1');
    return Promise.resolve('async1 success')
})

由于是reject所以会被catch捕获打印error!!!'async1'，之后输出promise2.
再看return Promise.resolve('async1 success')返回的是个promise需要再等待两个then的时间：

async函数在抛出返回值时，会根据返回值类型开启不同数目的微任务

return结果值：非thenable、非promise(不等待)
return结果值：thenable(等待 1个then的时间)
return结果值：promise(等待 2个then的时间)

Promise执行顺序

在 Promise 中 resolve 一个 Promise 实例解析：

最终结果就是：额外创建了两个Job，表现上就是后续代码被推迟了2个时序

再来一个await

再来一个

你可能感兴趣的:(Promise执行顺序)