promise、async/await在任务队列中的执行顺序

r囧r小猫 2021-10-24 02:32 518阅读 0赞

我们这篇主要讲浏览器和Nodejs环境下任务队列的执行顺序，尤其关注promise和async/await在任务队列中的执行顺序。

**1.setTimeout、setImmediate、nextTick、Promise.next情况下**

我们先记住几条结论：  
1.有process和setImmediate就考虑是在nodejs环境下  
2.微任务中nextTick队列在Promise.next前  
3.宏任务中setTimeout在setImmediate前  
4.所有可执行的微任务（包括nextTick和then）执行完毕之后，执行宏任务，注意宏任务队列并不是全部执行，执行全部的setTimeout队列中所有任务，再去执行对应产生的微任务，再去执行setImmediate，再去执行setImmediate产生的微任务。

我们先看一道题：

setTimeout(function(){
    	console.log(1)
    },0);
    
    new Promise(function(resolve,reject){
    	console.log(2);
    	resolve();
    })
    .then(function(){
    	console.log(3)
    })
    .then(function(){
    	console.log(4)
    });
    
    process.nextTick(function(){console.log(5)});
    
    console.log(6);

输出2，6，5，3，4，1

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]  
参考文章：http://m.nowcoder.com/questions?uuid=aa9df421f9fe41d69139cbde19223294

我们再看一个复杂一点的：

console.log('1');
    
    setTimeout(function() {
        console.log('2');
        
        new Promise(function(resolve) {
            console.log('4');
            resolve();
        }).then(function() {
            console.log('5')
        })
    
        process.nextTick(function() {
            console.log('3');
        })
    })
    process.nextTick(function() {
        console.log('6');
    })
    new Promise(function(resolve) {
        console.log('7');
        resolve();
    }).then(function() {
        console.log('8')
    })
    
    setTimeout(function() {
        console.log('9');
        
        new Promise(function(resolve) {
            console.log('11');
            resolve();
        }).then(function() {
            console.log('12')
        })
    
        process.nextTick(function() {
            console.log('10');
        })
    })

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]  
更复杂的可以看该篇文章（还有讲解）：https://www.jianshu.com/p/12b9f73c5a4f/

**2.async/await执行顺序**

我们先记住几条结论：  
1.遇见await左侧先执行，右侧时候要跳出函数，等外部任务执行完再跳回  
2.awati可以看成.then是一个微任务，放入微任务队列，和其他微任务一样，顺序执行  
3.执行微任务时，产生微任务顺序放入当前微任务队列，顺序执行  
4.遇见函数前面有async，awiat返回时，放入到Promise.then微任务队列中，然后执行微任务队列，如果前面没有async，await返回时候直接执行，下次遇见await时候，再跳出执行微任务队列

声明：下面输出结果，建议参考链接给出的答案，因为浏览器和Nodejs环境不同，设置不同浏览器和Nodejs版本不同，输出结果就不同

**再次注意参考给出的参考链接**

async function async1() {
        console.log( 'async1 start' )
        await async2()
        console.log( 'async1 end' )
    }
    async function async2() {
        console.log( 'async2' )
    }
    async1()
    console.log( 'script start' )
    
    //输出结果
    async1 start
    async2
    script start
    async1 end

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

async function testSometing() {
    console.log("执行testSometing");
    return "testSometing";
    }
    
    async function testAsync() {
    	console.log("执行testAsync");
    	return Promise.resolve("hello async");
    }
    
    async function test() {
    	console.log("test start...");
    	const v1 = await testSometing();
    	console.log(v1);
    	const v2 = await testAsync();
    	console.log(v2);
    	console.log(v1, v2);
    }
    
    test();
    
    var promise = new Promise((resolve) => {
    	console.log("promise start..");
    	resolve("promise");
    }); //3
    promise.then((val) => console.log(val));
    setTimeout(()=>{console.log("setTime1")},3000);
    console.log("test end...")
    
    //输出结果
    test start...
    执行testSometing
    promise start..
    test end...
    testSometing
    执行testAsync
    promise
    hello async
    testSometing hello async

async起什么作用：  
async函数返回的是一个Promise对象，如果在函数return一个直接量，async会把这个直接量通过Promise.resolve()封装成Promise对象。

await到底在等啥：  
await在等async函数，但要清楚，它等的实际是一个返回值。注意到 await 不仅仅用于等 Promise 对象，它可以等任意表达式的结果，所以，await 后面实际是可以接普通函数调用或者直接量的。

await做了什么处理：  
await后面的函数会先执行一遍，然后就会跳出整个async函数来执行后面js栈的代码。等本轮事件循环执行完之后又会跳回到async函数中等待await。后面表达式的返回值，如果返回值为非Promise则继续执行async函数后面的代码，否则将返回的Promise放入Promise队列（Promise的Job Queue）。

仔细阅读下面参考文章：  
https://segmentfault.com/a/1190000007535316  
https://segmentfault.com/a/1190000011296839\#articleHeader2  
https://blog.fundebug.com/2018/12/10/understand-async-await-and-promise-by-8-pictures/  
https://segmentfault.com/a/1190000015057278

**3.宏任务产生宏任务/微任务，微任务产生宏任务/微任务执行的顺序**

微任务产生微任务会加入当前微任务队列，顺序执行。

宏任务产生宏任务，新的宏任务会放到下一个队列，等当前宏任务下微任务执行完，再执行。

辅助图进行理解：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 3]

可以参考：https://blog.csdn.net/u012925833/article/details/89306184\#exp2-%E5%9C%A8%E5%BE%AE%E4%BB%BB%E5%8A%A1%E4%B8%AD%E5%88%9B%E5%BB%BA%E5%BE%AE%E4%BB%BB%E5%8A%A1

更多可以参考：  
https://github.com/forthealllight/blog/issues/5  
https://juejin.im/post/5b35cdfa51882574c020d685  
https://juejin.im/post/5b73d7a6518825610072b42b  
https://www.cnblogs.com/xiaohuochai/p/8527618.html  
https://segmentfault.com/a/1190000012220307  
https://juejin.im/post/5be5a0b96fb9a049d518febc  
https://juejin.im/post/5b73d7a6518825610072b42b  
https://www.jianshu.com/p/d207df1ca19e  
https://juejin.im/post/59e85eebf265da430d571f89

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]: /images/20211023/92e68cbbf89b43fe94034b7a5f7129f7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]: /images/20211023/cc00124dc3e444308e44bcbe617b5be6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 2]: /images/20211023/08d82e626b074f3fbc5a327801baf5be.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 3]: /images/20211023/bd25f05f11b54901acf72ca52ce60b58.png