前端promise、async、await和setTimeout的执行顺序

一、微任务与宏任务执行顺序

微任务队列只有一个，宏任务队列可以有多个。

  宏任务包括：script(全局任务), setTimeout, setInterval, setImmediate, I/O, UI rendering

  微任务包括： new Promise().then(回调), process.nextTick, MutationObserver(html5新特性)

1. 主进程必须是空闲的状态，如果到时间了，主进程不空闲也不会执行你的回调函数

2. 这个回调函数需要等到插入异步队列时前面的异步函数都执行完了，才会执行 。

微任务执行优先级高于宏任务，所以Promise比setTimeout优先执行。 

首先执行 宏任务 => 微任务的Event Queue => 宏任务的Event Queue

二、Promise

Promise 有了三种可能的状态：

1.pending（待定的）

2.fulfilled（已解决/以实现）

3.rejected（已拒绝/没有实现）

只有两种情况的转换：

1）从pending转换成fulfilled，这时就称为resolved（已定型）

2）从pending转换成rejected

Promise运行顺序总结：

• promise的构造函数是同步执行，promise.then中的函数是异步执行。
• 构造函数中的 resolve 或 reject 只有第一次执行有效，多次调用没有任何作用。promise状态一旦改变则不能再变。
• promise 的 .then 或者 .catch 可以被调用多次，但这里 Promise 构造函数只执行一次。或者说 promise 内部状态一经改变，并且有了一个值，那么后续每次调用 .then 或者 .catch 都会直接拿到该值。
• 如果在一个then（）中没有返回一个新的promise，则 return 什么下一个then就接受什么，如果then中没有return，则默认return的是 undefined.
• then()的嵌套会先将内部的then()执行完毕再继续执行外部的then();
• catch和then的连用，如果每一步都有可能出现错误，那么就可能出现catch后面接上then的情况。如果在catch中也抛出了错误，则后面的then的第一个函数不会执行，因为返回的 promise状态已经为rejected了

 

三、Async/Await?

• async/await是写异步代码的新方式，以前的方法有回调函数和Promise。
• async/await是基于Promise实现的，它不能用于普通的回调函数。
• async/await与Promise一样，是非阻塞的。
• async/await使得异步代码看起来像同步代码，这正是它的魔力所在。
• await关键字只能用在aync定义的函数内。async函数会隐式地返回一个promise，该promise的reosolve值就是函数return的值。

执行顺序：

使用 async 定义的函数，当它被调用时，它返回的其实是一个 Promise 对象。（当这个 async 函数返回一个值时，Promise 的 resolve 方法会负责传递这个值；当 async 函数抛出异常时，Promise 的 reject 方法也会传递这个异常值。）

await是一个让出线程的标志。await后面的函数会先执行一遍，然后就会跳出整个async函数来执行后面js栈的代码，等本轮事件循环执行完了之后又会跳回到async函数中等待await后面表达式的返回值，如果返回值为非promise则继续执行async函数后面的代码，否则将返回的promise放入promise队列。