async和await、宏任务和微任务

Ⅰ- 壹 - 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完成图片预加载

       function getImage(src) {
        return new Promise(function (resolve, reject) {
          var img1 = new Image();
          img1.src = src;
          img1.onload = function () {  
            resolve(img1);
          };
        });
      }
        async function loadImages(){
            var arr=[];
            for(var i=3;i<30;i++){
               await getImage("./img/"+i+"-.jpg").then(function(img){
                    arr.push(img);
               })
            return arr;
        }

        var p=loadImages();
        p.then(function(arr){
            console.log(arr);
        })

Ⅱ - 贰 - 宏任务和微任务

异步任务分为固定时间任务和非固定时间任务（加载文件和加载文件，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

    function setLight(light, time = 1000) {
      return new Promise(function (resolve, reject) {
        setTimeout(function () {
          resolve(light);
        })
      }, time)

    }

    function showLight() {
      setLight("红").then(function (light) {
        console.log(light); //打印红
        return setLight("黄", 2000);

      }).then(function (light) {
        console.log(light); //打印红
        return setLight("绿", 1000);
      }).then(function (light) {
        console.log(light); //打印红
        showLight();
      })

    }
    showLight();

2 使用async，await

    function setLight(light, time = 1000) {
      return new Promise(function (resolve, reject) {
        setTimeout(function () {
          resolve(light);
        })
      }, time)

    }

    async function showLight() {
      var arr = ["红", "黄", "绿"];
      for (var i = 0; i < arr.length; i++) {
        await setLight(arr[i]).then(function (light) {
          console.log(light)
        });
      }
      showLight();
    }
    showLight();

四 练习宏任务于微任务

      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 - 知识点：