JS高级：async await

async

异步函数的返回值是promise

情况一  如果正常规定返回值

  async function foo(){
    //相当于  promise.reslove(3221)
    return 3221
  }
  foo().then(res=>{
    console.log(res);
  })

 情况二 返回一个promise

其调用者会根据这个promise的接受情况返回，例如这个的结果是两秒之后打印211

  async function foo(){
    return new Promise((resolve,reject)=>{
      setTimeout(()=>{
        resolve(211)
      },2000)
    })
  }

  foo().then(res=>{
    console.log(res);
  })

 情况三 返回一个对象

按照then函数执行

  async function foo(){
    return {
      then:function(resolve,reject){
        resolve(2222)
      }
    }
  }

  foo().then(res=>{
    console.log(res);
  })

如果在函数中出现了异常，不会马上被浏览器捕获，而是通过promise.catch捕获，且可以继续运行其他代码

  async function foo(){
    console.log(1);
    'aaaa'.filiter()
    console.log(1);
    console.log(1);

    return 222
  }

  foo().then(res=>{
    console.log(res);
  }).catch(err =>{
    console.log('err',err);
    console.log('继续');
  })

 await

必须在异步函数中才能使用

 也就是说await后面接的一般是一个返回promoise的表达式

  function bar(){
    const p = new Promise((resovle,reject)=>{
      setTimeout(()=>{
        resovle(111)
      },2000)
    })
    return p
  }
  async function foo(){
    const res = await bar()
    console.log(res);
    const res1 = await bar()
    console.log(res1);
    console.log(1222);
   

  }
  foo()

会等到第一个bar()函数结束之后，得到res再去执行第二个bar函数

结果是

两秒后输出第一个 111  两秒后输出第二个111，然后马上输出1222

但是如果bar函数中，抛出异常呢

  function bar(){
    const p = new Promise((resovle,reject)=>{
      setTimeout(()=>{
        reject(111)
      },2000)
    })
    return p
  }

有两种方法捕捉异常

第一种是在调用函数的时候使用catch函数

    foo().catch(err => {
      console.log('err',err);
    })

第二种是在函数内部直接使用try catch

    async function foo() {
      try {
        const res = await bar()
        console.log(res);
        const res1 = await bar()
        console.log(res1);
        console.log(1222);
      } catch (err) {
        console.log('err',err);
      }
    }

输出都是err 111

这个地方bar函数是返回了一个promise，但是如果我们直接使用异步函数，也是可以放在await后面的，因为异步函数本来就返回一个promise

    function bar() {
      const p = new Promise((resovle, reject) => {
        setTimeout(() => {
          resovle(111)
        }, 2000)
      })
      return p
    }

    async function bar1(){
      return 222
    }

    async function foo() {
      try {
        const res = await bar()
        console.log(res);
        const res1 = await bar1()
        console.log(res1);
        console.log(1222);


      } catch (err) {
        console.log('err',err);

      }

    }