Promise - （三）异步宏任务和异步微任务

绝地灬酷狼 2023-10-01 08:17 15阅读 0赞

浏览器五大核心线程：

**1、****GUI渲染线程**

**2、JS引擎线程**

**3、事件触发线程**

**4、定时触发器线程**

**5、异步http请求线程**

其中JS代码的解释执行是由**JS引擎线程**负责的，我们通常将该线程叫做JS主线程，同时它也是单线程运行的。

即所有的JS代码都有JS主线程这一个线程负责解释执行。

单线程运行过程中，如果遇到费时操作，会造成阻塞现象，单线程必须处理完费时操作后，才可以继续往下执行。

为了提升单线程执行效率，JS引擎线程在解释执行JS代码时会将JS代码分为两种类型：

1、同步任务

2、异步任务

通常调用webAPIs的JS代码都被视为异步任务，比如setTimeout会开启一个异步任务，该异步任务会开启一个**定时触发器线程**，进行计时等待；再比如addEventListener会开启一个异步任务，该异步任务会开启一个**事件触发线程**，对指定的DOM元素进行事件监听；再比如$.ajax会开启一个异步任务，该异步任务会开启一个**异步http请求线程**，进行网络请求。

这些异步任务都有两个共同特点：

① 调用webAPIs，开启一个外部线程进行非JS代码运行的操作

② 调用的webAPIs都有回调函数

而同步任务的定义就是纯JS代码了。就算某段JS代码运行非常耗时，它也是同步任务，比如

> for(let i=0; i< 10000000000000; i++) \{ console.log(i+'abc') \}

另外我们需要注意回调函数和函数参数的区别：

我们可以说回调函数一定是函数参数，但是不能说函数参数是回调函数，我理解的回调函数就是异步任务的专有函数参数，它一定是异步任务完后，回头调用的。

function test(callback) {
        callback()
    }
    
    test(()=>{
        console.log(1)
    })
    
    console.log(2)

比如上面test函数的callback函数参数就不能称为回调函数，因为它是同步调用的。

**JS引擎将JS代码分为同步任务和异步任务的**

目的是：提高同步代码执行效率

原因是：异步代码在大多数情况下不应该阻塞同步代码，比如我们为DOM元素绑定了事件处理程序，那么JS主线程不能等待DOM元素触发事件后执行完事件处理程序，再继续往下执行后面的JS代码，这明显是不合理

实际上：JS的异步编程给我们造成了很大的困扰，因为有一些异步任务在业务场景下就是需要阻塞后续的同步代码，比如$.ajax请求网络数据，请求到之后才能继续后同步代码来处理网络数据

**JS的事件循环机制（不含微任务版）**

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 3][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 4][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 5][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 6][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 7][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 8][]

总结：

当JS引擎主线程执行JS代码时，会判断其是否为异步任务，若是异步任务则会立即交给webAPIs处理，若是同步任务则继续执行。

webAPIs得到异步任务后，会根据异步任务要求，开启对应的新线程处理，当开启的新线程执行完毕后，就会将异步任务的回调函数加入到 （异步宏任务队列）中

被加入到（异步宏任务队列）的回调函数不会立即进入执行栈执行，而是等待所有同步任务执行完后，JS引擎主线程会来异步宏任务队列中捞取队首位置的回调函数，放到执行栈中执行。

JS引擎主线程在将执行栈中的同步任务执行完后，就会不停地去异步宏任务队列中捞取回调函数，如果捞取到则压入执行栈中执行，执行完后，再去异步宏任务队列中捞取，如果捞取不到，则会不停地捞取，重复以上动作，所以叫事件循环。

**异步微任务：**

当JS引擎主线程执行完后所有的同步任务后，就会去捞取异步任务队列中的回调函数，将其加入到执行栈中执行，但是异步任务分为两类：

异步宏任务

异步微任务

而异步微任务也是缓存在队列中等待执行的，只是异步微任务并不是和异步宏任务在同一个队列中，异步微任务有自己的异步微任务队列。

而JS主线程在事件循环机制中，会先依次捞取完异步微任务队列中的所有回调函数到执行栈中执行，当异步微任务队列空了之后，才会去异步宏任务队列中捞取回调函数到执行栈中执行。

**到底是先宏后微，还是先微后宏：**

网上关于到底是宏任务先执行，还是微任务先执行观点百家争鸣，我的理解是：

你需要先搞清楚你说的“宏",是哪个”宏“

其实同步任务，也叫同步宏任务，它和异步宏任务，统称为宏任务。

如果你说的宏是同步宏+异步宏，则结论应该是 先宏后微

因为同步宏肯定是先执行的（清空），之后执行异步微（清空），之后再执行异步宏（一个），之后再执行异步微（清空）

如果你说的宏仅仅只是异步宏，则结论就是 先微后宏

因为 执行异步宏之前，必须先清空异步微

我觉得还是按照先微后宏理解比较号，因为同步宏毕竟是同步的，它肯定是首要执行的，没啥好讨论的。

关键就是异步任务中宏任务和微任务，它们同属于异步任务，执行时也很有特点，需要特别记忆。

**异步微任务到底是啥？**

Promise.then方法的函数参数（异步任务的回调函数中业务逻辑）就是一个异步微任务

我对于异步微任务和异步宏任务的理解就是：

我们将 异步宏任务可以分解为：异步任务+回调函数+回调函数中业务逻辑

Promise.then就是指定”回调函数中业务逻辑“，并执行

而异步宏任务 一般理解就是 ”异步任务+回调函数“

因此：异步微任务可以理解为 从异步宏任务中分解出来的 异步任务

**加深对微任务的理解**

setTimeout(() => {  // ①
        console.log(1)
    }, 0)
    
    Promise.resolve().then(() => { // ②
        console.log(2)
    })
    
    Promise.resolve().then(() => { // ③
        console.log(3)
    })
    
    console.log(4) // ④

①是一个异步宏任务，因为设置0s等待，所以交给webAPI后，立即被加入了异步宏队列

②是一个异步微任务，直接被加入异步微队列

③是一个异步微任务，直接被加入异步微队列

④是一个同步任务立即执行，所以直接打印4到控制台

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 9][]

可以发现，打印完4后，执行栈空了，根据事件循环机制，JS引擎线程会去异步任务队列中捞取回调函数执行

此时，发现异步宏队列和异步微队列都有回调函数等待捞取，则根据先微后宏原则，将异步微任务队列清空执行，则会打印 2 打印3，最后打印1

setTimeout(() => { // 一
        console.log(1)
    }, 0)
    
    new Promise((resolve) => { // 二
        console.log(2)
        resolve()
    }).then(() => { // 三
        console.log(3)
    }).then(() => { // 四
        console.log(4)
    })
    console.log(5) // 五

一：异步宏任务，交给webAPI后无需等待理解加入异步宏任务队列

二：new Promise(excutor)中excutor同步执行，所以打印2，并返回一个fullfilled状态的promise对象

三：then方法同步执行，其中回调函数被当作异步微任务加入异步微任务队列

四：依赖于（三）then的执行结果，而（三）then还没有结果返回，所以此时不执行

五：同步任务打印5

所以第一轮下来，打印了 2 打印了5

异步宏队列：console.log(1)

异步微队列：console.log(3)

第二轮，先微后宏

打印3，之后（四）执行，将console.log(4)加入异步微队列

异步宏执行前，必须要清空异步微，而此时又有新的异步微加入，所以要先清空异步微

打印4

最后打印1

所以最终结果是：2 5 3 4 1

const first = () => (new Promise((resolve, reject) => {
        console.log(3)
        let p = new Promise((resolve, reject) => {
            console.log(7)
            setTimeout(() => {
                console.log(5)
                resolve(6)
            }, 0)
            resolve(1)
        })
        resolve(2)
        p.then((arg) => {
            console.log(arg)
        })
    }))
    
    first().then((arg) => {
        console.log(arg)
    })
    
    console.log(4)

3 7 4 1 2 5

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

错误输出： 1 7 2 3 8 4 5 6 0

正确输出： 1 7 2 3 8 4 6 5 0

这个易错的笔试题考察的是：**then方法指定的回调函数加入异步微任务队列的时机**

首先需要明确一点，then的链式调用都会被当成同步代码执行掉。

之前我一直有一个错误的想法

> then链式调用，后面的then的调用者是前面的then的返回值，而前面then的返回值是异步返回的，所以后面的then就在同步代码执行阶段中止调用了

这是一个错误的想法，then方法调用是同步的，但是then方法指定的回调函数的执行是异步的，所以在同步代码执行阶段，then链式调用中所有的then都会一次性调用完，但是then指定的回调函数不会随着then的调用而加入微任务队列。

then指定的回调函数加入微任务队列的判断标准只有一个：

> 对于的promise对象的状态变为了fulfilled或rejected

那么promise对象的状态何时变为fulfilled或rejected呢？

> 修改promise对象的状态，只在一个地方发生，但是有两种情况：
> 
> new Promise传入的excutor中发生了对promise对象状态的修改，如下：
> 
>     new Promise((resolve,reject)=>{
>             // 此处调用resolve或reject修改生成的promise的状态
>     })
> 
> 两种修改promise对象状态的情况分别是：
> 
> 1、同步修改promise对象的状态
> 
> 2、异步修改promise对象的状态
> 
>     new Promise((resolve,reject)=>{
>         resolve('OK') // 同步修改promise对象状态
>     })
> 
>     new Promise((resolve,reject)=>{
>         setTimeout(()=>{
>             resolve('OK') // 异步修改promise对象状态
>         })
>     })
> 
> 这两种情况修改promise对象状态，会影响then方法指定回调函数进入微任务队列的时机
> 
> 1、同步修改promise对象状态
> 
> 在then方法执行时，promise对象状态已经变为fulfilled或rejected，所以此时then方法指定的回调函数立即进入微任务队列
> 
> 2、异步修改promise对象状态
> 
> 在then方法执行时，promise对象状态还是pending，所以此时then方法指定的回调函数会被缓存到promise对象的属性中，等待对象状态改变后再加入微任务队列

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/c4fa62938cba45de86aa4fa414b488af.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/2abb33c550c24e26a5bbabba4a6eb17d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/50f73436c7f64b4da76779f60e8d9862.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/90d54fadc61d439d900a9d0c20c9f884.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/6b43dc8883a4470dbcd0a4741e82f5dd.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/fd7aeb36a04c4ed2a53c10be8bf65e8c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 6]: https://img-blog.csdnimg.cn/4249b97055d94f9ea1f61f77f6208a38.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 7]: https://img-blog.csdnimg.cn/1fddabf131b94e30bafe26f13e484d6a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 8]: https://img-blog.csdnimg.cn/f1994bfbb4ad4b77b94365efdbe68a55.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 9]: https://img-blog.csdnimg.cn/4048636cc17748ed9717a7cb1ae7c5d2.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16