promise、async、setTimeout异步执行顺序问题

分析：

理解此执行顺序需要对JS的微任务(Microtasks)和宏任务（Macrotasks）进行一定的了解，其中微任务包括（Promise、MutaionObserver、process.nextTick等）；宏任务包括（setTimeout、setInterval、I/O等）。其中JS异步执行的机制是遇到宏任务就先执行宏任务，接着执行所有的微任务。然后再次从宏任务开始，找到其中一个任务队列执行完毕，再执行所有的微任务。

宏任务与微任务的执行顺序

接下来我们通过案列具体分析:

案例一:


console.log('JS开始');
    
setTimeout(function() {
  console.log('定时器开始');
}, 0);

const newPromise6 = new Promise(function(resolve, reject) {
  resolve(console.log('Promise1'));
});

newPromise6.then(function() {
  console.log('Promise2');
}).then(function() {
  console.log('Promise3');
});

console.log('JS结束');

结果
JS开始
Promise1
JS结束
Promise2
Promise3
定时器开始

解析

通过上面的学习我们知道setTimout为宏任务而Promise为微任务，而定时器需要等带本轮执行环境里面的所有同步和异步执行完毕之后才回去执行它。所以当执行玩第一轮宏任务打印出JS开始遇到promise就会将其塞入本轮执行的微任务中。以此类推，开始执行下一轮的任务。

案列二

代码一：


async function async1() {
  console.log("async1 start");
  await  async2();
  console.log("async1 end");
}

async  function async2() {
  console.log( 'async2');
}

console.log("JS开始");

setTimeout(function () {
  console.log("settimeout");
},0);

async1();

new Promise(function (resolve) {
  resolve(console.log("promise1"));
}).then(function () {
  console.log("promise2");
});

console.log('JS结束);

结果
JS开始
async1 start
async2
promise1
JS结束
promise2
async1 end
settimeout

代码二：


new Promise(function (resolve) {
    resolve(console.log("promise1"));
  }).then(function () {
    console.log("promise2");
  });
  
  async function async1() {
    console.log("async1 start");
    await  async2();
    console.log("async1 end");
  }
  
  async  function async2() {
    console.log( 'async2');
  }
  
  console.log("JS开始");
  
  setTimeout(function () {
    console.log("settimeout");
  },0);
  
  async1();
  
  console.log('JS结束');

结果
promise1
JS开始
async1 start
async2
JS结束
promise2
async1 end
settimeout

分析

1.因为async await 基于Promise，是他的一个语法糖，如果使用async，函数体里有return XX，会被包装成一个异步promise.resolve('XXX')，如果没有显式return，那么async也同样包装promise.resolve('undefined')；

2.因为promise的构造函数是同步执行，promise.then中的函数是异步执行。async/await是写异步代码的新方式，所以代码二会先打印出promise1然后在打印出JS开始。（这一步在网上有很多笔者都存在错误，因此我们在参考的同时也需要进行试验）。

案例三


console.log('1');

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

setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
})

结果

1
7
6
8
2
4
9
11
3
10
5
12

分析

这只能说是我见过最伤心病狂的题目了，但是我们依然可以将其化繁为简，先将任务清楚的分为宏任务和微任务；然后找到第一个宏任务打印出“1”；然后遇到定时器先行跳过并记为setTime1；在遇到process.nextTick为微任务保留并记为process1,在遇到promise先打印“7”后面的then为微任务记为then1;遇到第二个定时器记为setTime2。第一轮下来我们打印了“1”，“7”并且知道宏任务有：setTime1和setTime2；微任务：process1和then1。在执行微任务，微任务的执行顺序我们要遵循先process后then即可。最终可以得到顺序为：1，7，6，8，2，4，9，11，3，10，5，12。

最后这些只是我个人的理解，有错误希望能有所体谅，希望我的文章能对各位会有所帮助。。。

最后编辑于：2019.12.20 13:52:18