js---async和awit的一些理解

一、async函数的执行（async关键字意思表示为异步）

async函数体里没有搭配await关键字使用时，async函数的执行和普通函数一致

    async function fn1() {
      console.log("我是async异步函数");
    }

    function fn2() {
      console.log("我是普通函数");
    }
    fn1()
    fn2()

 控制台执行：

 async函数体里搭配await关键字使用时，async函数体执行遇到await关键字时，await会阻塞async函数体继续往下执行，await往下的代码会被进入异步任务队列中等待主线程执行完毕后再执行

案例1：

 控制台执行：

案例2：

控制台执行：

 二、async函数的返回值

 async函数的返回值全为Promise对象：

 1、当函数体内返回Promise对象时，那么async函数的返回值跟函数体内返回Promise对象保持一致

①promise对象为等待状态

    async function fn() {
      return new Promise((reslove, rejiect) => {
        //不调用reslove或者reslove函数，那么promise会一直为等待状态
      })
    }

    let result = fn()
    console.log(result);

执行：

②promise对象为失败状态

    async function fn() {
      return new Promise((reslove, reject) => {
        setTimeout(() => {
          //模拟异步请求后端数据，超过了3秒后请求超时
          reject("请求超时")
        }, 3000)
      })
    }

    let result = fn()
    console.log(result);

执行：

③promise对象为成功状态

    async function fn() {
      return new Promise((reslove, rejiect) => {
        setTimeout(() => {
          //模拟异步请求后端数据，1秒钟后端数据返回
          reslove('后端数据')
        }, 1000)
      })
    }

    let result = fn()
    console.log(result);

执行：

 2、当函数体内返回不是Promise对象时，那么async函数会调用Promise.reslove()封装函数体的返回，保证async函数返回为promise对象

①函数无返回值时默认返回undefined

    async function fn() {

    }

    let result = fn()
    console.log(result);

执行：

② 函数返回值为普通数据（字符串，数值，布尔值，对象...）

    async function fn() {
      return 1
      // return '哈哈哈'
      // return true
      // return [1, 2, 3]
      // return { name: 'hsq' }
      // return function () {
      //   console.log("hsq");
      // }
    }

    let result = fn()
    console.log(result);

执行：

 三、await运算符的搭配

注意：await运算符一定要在async函数里使用，一般我们使用await + promise对象搭配使用,获取promise对象为成功的结果值

1、await其实就是一个运算符，获取运算成功的值，await后面搭配表达式，

①await 表达式（非promise对象）

案例：

    async function fn() {
      // let result = await 1
      // let result = await 1 + 1
      // let result = await 'hsq'
      // let result = await function () {
      //   console.log('函数');
      // }
      // let result = await [1, 2, 3]
      let result = await {
        name: 'hsq'
      }

      console.log(result);
    }
    fn()

执行：

② await 表达式（promise对象）

await + promise对象运行结果返回promise对象状态为成功的的结果值

案例：

②peomise对象为等待

    async function fn() {
      let result = await new Promise((reslove, reject) => {

      })

      console.log(result);

    }
    fn()

执行：

ps: promise对象为等待时，await + promise对象运行结果无法获取结果

②peomise对象为失败

    async function fn() {
      let result = await new Promise((reslove, reject) => {
        setTimeout(() => {
          reject("失败")
        }, 1000)
      })
      // .catch(res => {
      //   console.log(res);
      // })
      console.log(result);

    }
    fn()

执行：

ps:当promise对象为失败时，线程会抛出异常， await + promise对象运行结果无法返回promise对象状态为失败的的结果值，可以通过promise的.catch()方法获取promise失败的结果值

③peomise对象为成功

    async function fn() {
      let result = await new Promise((reslove, reject) => {
        setTimeout(() => {
          reslove("成功获取的数据")
        }, 1000)
      })

      console.log(result);
    }
    fn()

执行：

 ③别忘了async函数的返回值为promise对象，可以搭配await使用

案例：

    async function getData() {
      return new Promise((reslove, reject) => {
        setTimeout(() => { reslove("成功获取后端返回数据") }, 1000)
      })
    }

    async function useData() {
      let result = await getData()
      console.log(result);
    }
    useData()

执行：

四、总结

 1、async表示异步，async函数执行时遇到await只会阻塞自己函数体内代码的执行，不会阻塞主线程代码的执行，所以称为异步函数

2、await只能存在在async异步函数中，我们一般使用async+await+promise进行异步编程，await+promise只能获取promise对象为成功时的结果值，promise对象为失败时的结果值只能通过捕获异常的方式获取。

五、补充

async函数里遇到await之前的代码是同步里的，遇到await时，会把await下面的代码放入微任务队列，并且退出这个async函数，当主线程空闲时再执行微任务队列的代码