async和await、宏任务和微任务

客官°小女子只卖身不卖艺 2023-06-29 10:37 2阅读 0赞

# Ⅰ- 壹 - async和await #

*  async 函数执行后返回一个Promise对象
 *  await只能写在async函数中(`async`和`await`必须要一起使用。)
 *  await 只能处理promise对象的异步等待,在其他的异步方法时候无效，
 *  async 函数中使用return返回的内容可以通过then来获取
 *  从本质上讲，`await`函数仍然是`promise，`

## 一 为什么要用await ##

为了使我们的异步代码，更像同步的代码

## 一 基本使用 ##

用法：首先在 function 前面加 async 用来说明这个函数是一个异步函数

然后在async里面写await

**await** 等待当前async function语句内部语句的执行 await接受promise返回的成功或者失败的内容，若没有返回值则不继续向下执行

*  如果asycn里的代码都是同步的，那么这个函数被调用就会同步执行

async function fn(){ 
      console.log('a')
    }
    fn()
    console.log('b')
    //a
    //b

*  在await后面接的这个promsie都是同步的，await还是会等待，而Promise没有返回值（成功或者失败），所以await不会继续向下执行，

function fn(){ 
        return new Promise(resolve=>{ 
            console.log(1)
        })
    }
    async function f1(){ 
        await fn();//没有返回结果所以不向下执行
        console.log(2)
    }
    f1()
    console.log(3)
    //1
    //3

*  fn属于同步的有返回结果，返回失败的结果所以向下继续执行

function fn() { 
          return new Promise((resolve, rej) => { 
            console.log(1)
            rej()
          }).then(function (a) { 
            console.log(5)
          }, function (a) { 
            console.log(4)
          })
        }
        async function f1() { 
          await fn(); //同步堵塞 执行完之后再向下执行
          console.log(2)
        }
        f1()
        console.log(3);
        //1
        //3
        //4
        //2

*  sum变量是等着b（）这个函数执行完毕才有值的 ，其实await和promise中的 .then()差不多

async function a(y){ 
        let sum = await b(3,4)
        let c= sum+y;
        console.log(c)
    }
    function b (x,y){ 
        return x+y;
    }
    a(10)

使用`promises`，异步函数有两个可能的返回值：已解析的值和被拒绝的值。我们可以`.then()`用于正常情况，`.catch()`用于特殊情况。

*  利用try…catch，进行错误处理

async function a(y){ 
     try{ 
      let a = await b(3,4)
        let c= a+y;
        console.log(c)
    }catch(err){ 
    	console.log(err);
     }
    }
    function b (x,y){ 
        return x+y;
    }
    a(10,)

## 二 async和await完成图片预加载 ##

# Ⅱ - 贰 - 宏任务和微任务 #

异步任务分为固定时间任务和非固定时间任务（加载文件和加载文件，ajax通信）

而宏任务和微任务是固定时间的异步任务安排

*  宏任务有：  
    setTimeOut setInterval
 *  微任务有：Promise

## 一 特点 ##

宏任务：指将当前的任务挪至下一个任务列的最顶端执行  
微任务：将当前任务列的内容挪至当前任务列的最低端执行

事件抛发都是同步及时触发 的

## 二 任务优先级 ##

`宏任务里面的微任务比微任务里的宏任务优先`  
`微任务里的微任务比微任务优先`

案例：

Promise.resolve().then(function () { 
          console.log("c")
          setTimeout(function () { 
            console.log("b");
          }, 0)
        })
        setTimeout(function () { 
          console.log("d")
          Promise.resolve().then(function () { 
            console.log("a");
          })
        }, 0)

图解执行过程:

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F0zFzDT6-1596587685343)(C:\\Users\\幻影旅团\\AppData\\Roaming\\Typora\\typora-user-images\\image-20200804202700973.png)\]

## 三 案例 红绿灯 ##

1 使用Promise

2 使用async，await

## 四 练习宏任务于微任务 ##

new Promise(function (res) { 
            console.log(1);//---1
            res();
            Promise.resolve().then(function () { 
              console.log(2);//---3
            });
            new Promise(function (res) { 
              res();
            }).then(function () { 
              console.log(-1);//---4
            });
            console.log(0);//-----2
          })
            .then(function () { 
              console.log(3);//---5
              Promise.resolve().then(function () { 
                console.log(4);//---7
              });
            })
            .then(function () { 
              console.log(5);//---8
            });
          Promise.resolve().then(function () { 
            console.log(6);//---6
            Promise.resolve().then(function () { 
              console.log(7);//----9
            });
          });
    
          setTimeout(function () { 
            setTimeout(function () { 
              console.log(8);//---12
            }, 0);
            Promise.resolve().then(function () { 
              console.log(9);//---10
            });
          }, 0);
          setTimeout(function () { 
            console.log(10);//---11
          }, 0);

console.log(1);
          new Promise(function (res, rej) { 
            console.log(2);
            res();
          })
            .then(function () { 
              console.log(3);
              Promise.resolve().then(function () { 
                console.log(5);
                setTimeout(function () { 
                  console.log(6);
                  Promise.resolve().then(function () { 
                    console.log(7);
                  });
                  setTimeout(function () { 
                    console.log(8);
                  }, 0);
                }, 0);
              });
            })
            .then(function () { 
              console.log(4);
            });
          setTimeout(function () { 
            console.log(9);
            new Promise(function (res) { 
              res();
              console.log(10);
            }).then(function () { 
              console.log(11);
            });
          });
          Promise.resolve().then(function () { 
            setTimeout(function () { 
              Promise.resolve().then(function () { 
                console.log(12);
              });
              console.log(13);
            }, 0);
          });
          setTimeout(function () { 
            setTimeout(function () { 
              setTimeout(function () { 
                Promise.resolve().then(function () { 
                  console.log(14);
                });
                console.log(15);
              }, 0);
              console.log(16);
            }, 0);
            console.log(17);
          }, 0);
          console.log(18);
          new Promise(function (res) { 
            console.log(19);
            setTimeout(function () { 
              console.log(20);
            }, 0);
          });

# 0 - 0 - 知识点： #