异步setTimeout、Promise、Async/Await

2019-09-25 本文已影响0人明里人

原文：https://blog.csdn.net/lunahaijiao/article/details/86716825

先看一道面试题：

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');
})

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

这里涉及到Microtasks、Macrotasks、event loop 以及JS的异步运行机制。

一、event loop

JS主线程不断的循环往复的从任务队列中读取任务，执行任务，这种运行机制称为事件循环（event loop）。

二、Microtasks、Macrotasks

Microtasks和Macrotasks是异步任务的一种类型，Microtasks的优先级要高于Macrotasks，下面是它们所包含的api：
microtasks：process.nextTick、promise、Object.observe (废弃)、MutationObserver
macrotasks：setTimeout、setImmerdiate、setInterval、I/O、UI 渲染
注意：
1、每一个 event loop 都有一个 microtask queue；
2、每个 event loop 会有一个或多个macrotaks queue ( 也可以称为task queue )；
3、一个 task 任务可以放入 macrotask queue 也可以放入 microtask queue中；
4、每一次event loop，会首先执行 microtask queue，执行完成后，会提取 macrotask queue 的一个任务加入 microtask queue，接着继续执行microtask queue，依次执行下去直至所有任务执行结束。

三、单线程的JavaScript

所谓单线程，是指在JS引擎中负责解释和执行JS代码的线程唯一，同一时间上只能执行一件任务。
单线程避免了DOM渲染冲突：
浏览器要渲染DOM，JS可以修改DOM，两段JS不能同时执行，都修改DOM就会冲突。
引入单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这同时又导致了一个问题：如果前一个任务耗时很长，后一个任务就不得不一直等着。

四、JS异步执行机制：

JS 主线程拥有一个执行栈（同步任务）和一个任务队列（microtasks queue），主线程会依次执行代码。

当遇到 (同步) 函数时，会先将函数入栈，函数执行结束后让函数出栈；
当遇到task任务 (异步) 时，task返回一个值，让主线程继续往下执行，而task留给浏览器内核执行，最后将定义的回调函数加入相应的任务队列中 (microtasks 或 macrotasks)；
当JS主线程 (同步) 代码执行完毕后，清空执行栈，按先进先出的顺序读取microtasks queue中的回调函数，将该函数如栈，执行该函数，执行完毕后清空执行栈，再去读取任务队列。
当microtasks queue中的任务执行完成后，会提取 macrotask queue 的一个任务加入 microtask queue，接着继续执行microtask queue，依次执行下去直至所有任务执行结束。microtask存在任务，就会先执行microtask ，而不是先执行macrotask 。

// 1、开始执行
console.log(1);  // 2、打印1
setTimeout(function() { // 6、执行浏览器0秒后推入任务队列 (macrotasks) 的函数
   console.log(2); // 7、打印2
   Promise.resolve(1).then(function() { // 8、将resolve成功的.then方法添加到任务队列 (microtasks) 
       console.log(3); // 9、打印3
   });
}) // 3、定义 setTimeout 函数
setTimeout(function() { // 10、执行浏览器0秒后推入任务队列 (macrotasks) 的函数
    console.log(4); // 11、打印4
}) // 4、定义setTimeout
// 5、主线程执行栈清空，读取任务队列中的任务
// 注意：
// Promise.resolve后加入,但在console.log(4)的计时器前执行，因为Promise对应任务队列是 microtasks。

五、async await、Promise、setTimeout

1、setTimeout

console.log('script start') //1. 打印 script start
setTimeout(function(){
    console.log('settimeout')   // 4. 打印 settimeout
})  // 2. 调用 setTimeout 函数，并定义其完成后执行的回调函数
console.log('script end')   //3. 打印 script start

2、Promise
Promise本身是同步的立即执行函数，当在executor中执行resolve或者reject的时候, 此时是异步操作，会将then/catch等添加到任务队列中，当主栈完成后，才会去调用resolve/reject中存放的方法执行，打印p的时候，是打印的返回结果，一个Promise实例。

console.log('script start')
let promise1 = new Promise(function (resolve) {
    console.log('promise1')
    resolve()
    console.log('promise1 end')
}).then(function () {
    console.log('promise2')
})
setTimeout(function(){
    console.log('settimeout')
})
console.log('script end')
// 输出顺序: script start->promise1->promise1 end->script end->promise2->settimeout

当主线程执行到Promise对象时：
1、promise1.then() 的回调就是一个 task；
2、promise1 是 resolved 或 rejected 时，这个 task 就会放入当前事件循环回合的 microtask queue；
3、promise1 是 padding 时，这个 task 会放入事件循环未来某个 (可能是下一个) 回合的 microtask queue 中；
4、setTimeout 的回调也是个 task ，它会被放入 macrotask queue 即使是 0ms 的情况

3、async await

async function async1(){
    console.log('async1 start');
    await async2(); // async2为同步函数，先执行完async2跳出async1函数
    console.log('async1 end')
}
async function async2(){
    console.log('async2')
}

console.log('script start');
async1();
console.log('script end')

// 输出顺序：script start->async1 start->async2->script end->async1 end

async 函数返回一个 Promise 对象，当函数执行的时候：
1、如果 await 后面是一个同步函数，跳出当前 async 函数体，但会将 await 后面的这个同步函数放在单线程执行栈中第一位，依次往下执行，最后再执行 await 下面等待的代码；
2、如果 await 后面是一个异步函数，跳出 async 函数，执行单线程执行栈的其他任务，之后再执行 await 定义的异步函数。当 await 定义的异步函数执行完毕后，最后执行 await 下面等待的代码。

等到触发的异步操作完成，再执行函数体内后面的语句。可以理解为，是让出了线程，跳出了 async 函数体。
await的含义为等待，也就是 async 函数需要等待await后的函数执行完成并且有了返回结果（Promise对象）之后，才能继续执行下面的代码。await通过返回一个Promise对象来实现同步的效果。

再来看上面那一道题：

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');
})

async1();                          

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

console.log('script end');

1、先执行console.log('script start');
2、执行 async1 方法，并打印async1 start
3、遇到 await 后，发现后面是一个同步函数，于是将跳出 async1，并在执行栈 (单线程上) 先执行该同步函数，打印 'async2'
4、执行 Promise，打印 'promise1'，并将 resolve 成功的then方法加入 microtask
5、执行打印 'script end'
6、执行栈执行完毕后，执行 await 后面等待的代码，打印 'async1 end'
7、执行 Promise then 方法，打印 'promise2'
8、最后执行 macrotask 中计时器的回调函数，打印 'setTimeout';