美文网首页
async、await其实是generator和promise的

async、await其实是generator和promise的

作者: 一颗冰淇淋 | 来源:发表于2022-01-01 20:27 被阅读0次

    async 关键字用于声明异步函数,await 用于在async函数中将异步代码变为同步,阻塞代码的执行

    对于promise和generator不熟悉的朋友可以移步看看这些文章

    Promise的理解与使用(一)
    Promise的理解和使用(二)
    手写promise之分步解析
    javascript事件循环机制及面试题详解

    async、await的推导

    我们用案例推出async await 关键字的作用。
    异步函数getRequestData,作用是等待2s将输入的函数返回。

    function getRequestData(data) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(data);
        }, 2000);
      });
    }
    

    连续调用函数3次,传入"aaa",并依次拼接 "bbb", "ccc",最后的结果为,等待6s输出 "aaabbbccc"。

    回调地狱式实现
    getRequestData("aaa").then((res) => {
      getRequestData(res + "bbb").then((res) => {
        getRequestData(res + "ccc").then((res) => {
            console.log("result", res);
        });
      });
    });
    

    回调地狱式代码可读性和可维护性都很差,为解决这一问题,我们尝试链式调用。

    链式调用
    getRequestData("aaa")
      .then((res) => {
        return getRequestData(res + "bbb");
      })
      .then((res) => {
        return getRequestData(res + "ccc");
      })
      .then((res) => {
        console.log("res", res);
      });
    

    通过链式调用使得代码可读性稍强了一些,但这样的代码还是不太好理解,再来对其进行优化

    generator
    function* showData() {
      const res1 = yield getRequestData("aaa");
      const res2 = yield getRequestData(res1 + "bbb");
      const res3 = yield getRequestData(res2 + "ccc");
      console.log("res", res3);
    }
    
    const generator = showData();
    generator.next().value.then(res=>{
      generator.next(res).value.then(res=>{
        generator.next(res).value.then(res=>{
          console.log(res)
        })
      })
    })
    

    通过yield来对函数传参与取值,generator函数中进行请求的代码就变得简单起来,但next调用似乎更加复杂了,仍然有函数嵌套的情况,不过调用next方法是有迹可循的,可以用递归来实现。

    const generator = showData();
    function execGenerator(generator){
      function exec(res){
        const gen = generator.next(res)
        if(gen.done){
          return gen.value
        }
        return gen.value.then(re=>{
          exec(re)
        })
      }
      exec()
    }
    execGenerator(generator)
    

    封装next方法调用之后,异步请求就变得像同步代码一样,可以等待上一个函数执行成功再调用下一个函数,且使得代码可读性更强。

    aysnc、await

    最终async、await版代码如下所示,其实就是generator和promise的语法糖,省去了next方法递归的过程。

    async function showData(){
      const res1 = await getRequestData("aaa");
      const res2 = await getRequestData(res1 + "bbb");
      const res3 = await getRequestData(res2 + "ccc");
      console.log("res", res3);
    }
    showData()
    

    async函数与普通函数的区别

    返回值

    async函数也可以有返回值,它的返回值与promise一样分为三种类型

    • 返回值为基本数据类型,会被 Promise.resolve 包裹,执行成功的回调
    • 返回值为promise,执行的结果与该promise一致
    • 返回值为实现了thenable的对象,执行结果为then函数中的结果
    async function foo() {
      // return 'hello'
      
      // return new Promise((resolve, reject)=>{
      //   reject('fail')
      // })
      
      return {
        then: (resolve, reject) => {
          reject("fail");
        },
      };
    }
    
    const promise = foo();
    promise
      .then((res) => {
        console.log("res:", res);
      })
      .catch((err) => {
        console.log("err:", err);
      });
    

    thenable中返回reject,所以异步函数的结果也为reject,执行catch函数的逻辑

    1_thenable的执行结果.png
    抛出异常

    普通函数中抛出异常,会直接中断程序的执行,后面的代码都不会执行

    function bar(){
      throw new Error('error')
    }
    bar()
    console.log('上面代码抛出异常了')
    
    2_普通函数抛出异常.png

    而异步函数中抛出异常,只需要定义catch方法,是不会中断程序执行的

    async function foo() {
      throw new Error('error')
    }
    const promise = foo();
    promise
      .then((res) => {
        console.log("res:", res);
      })
      .catch((err) => {
        console.log("进入了catch方法");
      });
    console.log('上面代码抛出异常了')
    
    3_异步函数抛出异常.png

    async其它注意点

    异步函数执行reject

    promise可能返回resolve或者reject,当执行reject时,async函数执行的时候需要定义catch方法

    function getData() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          reject("fail");
        }, 1000);
      });
    }
    async function foo() {
      const promise = await getData();
      console.log(promise);
    }
    foo()
    

    当没有定义catch方法时,是会直接报错的

    4_reject时需要定义catch方法.png
    await执行结果

    await后面会跟上一个表达式,表达式会返回promise,await会等待promise执行resolve时,才会继续往后执行。
    await后的表达式也有三种情况,与async函数返回值类型一致

    • 表达式为基本数据类型,会被 Promise.resolve 包裹,会执行成功
    • 表达式为promise,执行的结果与该promise一致
    • 表达式为实现了thenable的对象,执行结果为then函数中的结果
    async function foo() {
      await Promise.reject("promise执行了reject方法");
      console.log("await下面一行代码还会执行吗");
    }
    foo().catch((err) => {
      console.log("err", err);
    });
    console.log("全局的代码呢");
    

    当await后的表达式执行失败时,后面的代码就不会执行了

    5_await的结果.png
    async函数的执行顺序

    await下面的代码需要等到await后的表达式执行完成才执行

    async function bar() {
      console.log("2");
      return new Promise((resolve) => {
        resolve();
      });
    }
    async function foo() {
      console.log("1");
      await bar();
      console.log("3");
    }
    foo();
    console.log("4");
    

    await后的表达式其实会执行promise的方法,所以await下面的代码其实会放到微任务中

    6_async函数执行顺序.png

    面试题

    async function async1 () {
      console.log('async1 start')
      await async2();
      console.log('async1 end')
    }
    
    async function async2 () {
      console.log('async2')
    }
    
    console.log('script start')
    
    setTimeout(function () {
      console.log('setTimeout')
    }, 0)
     
    async1();
     
    new Promise (function (resolve) {
      console.log('promise1')
      resolve();
    }).then (function () {
      console.log('promise2')
    })
    console.log('script end')
    
    • 函数async1、async2被定义,但是没有调用,首先输出 "script start"
    • setTimeout 中的的内容会被放到宏任务队列中,最后执行
    • 调用函数async1,输出 "async1 start",执行函数async2,输出 "async2",函数 async2下方的输出"async1 end"将会被放到微任务队列中
    • 执行promise的executor部分,输出 "promise1",then 方法里的输出"promise2"将被放到微任务队列中
    • 输出 "script end"
    • 执行微任务队列中的代码,依次输出 "async1 end"、"promise2"
    • 执行宏任务队列中的代码,输出 "setTimeout"

    图示如下

    7_图示.png

    执行结果如下

    8_面试题.png

    以上就是async、await的推导过程及用法,关于js高级,还有很多需要开发者掌握的地方,可以看看我写的其他博文,持续更新中~

    相关文章

      网友评论

          本文标题:async、await其实是generator和promise的

          本文链接:https://www.haomeiwen.com/subject/raemqrtx.html