async和await、宏任务和微任务

12 篇文章 0 订阅

Ⅰ- 壹 - async和await

  • async 函数执行后返回一个Promise对象

  • await只能写在async函数中(asyncawait必须要一起使用。)

  • 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 - 知识点:

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值