Async和Await

async作为一个关键字放到函数前面，用于表示函数是一个异步函数

异步函数说明函数的执行不会阻塞后面代码的执行，正常的函数来调用。

async function fn() {
  return '运行'
}
console.log(fn())

async 函数（）自动将常规函数转换成Promise，返回值是一个Promise对象

如果要获取到promise 返回值，使用then 方法。

async function fn() {
  return '运行'
}
fn().then(res => {
  console.log(res)
})
console.log('走你...')

因为转换成promise所以，如果函数内部抛出错误， promise 对象有一个catch 方法进行捕获

async function fn(flag) {
  if (flag) {
    return '这是true'
  } else {
    throw '这是false'
  }
  return 'hello world'
}

console.log(fn(true))
//console.log(fn(false))
fn(false).catch(err => {
  console.log('可以捕获的错误')
})

await是等待的意思,它后面可以放任何表达式，更多的是放一个返回promise 对象的表达式。

注意await 关键字只能放到async 函数里面

2秒之后控制台输出4！！！！

promise版本：

function fn(num) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(num * 2)
    }, 2000)
  })

}

fn(2).then(res => {
  console.log(res) // 4
})

async await版本：

function fn(num) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(num * 2)
    }, 2000)
  })

}

async function test() {
  let result = await fn(2)
  console.log(result)
}
test()

调用test 函数，遇到了await, await 表示等一下，代码就暂停到这里，不再向下执行了，等后面的promise对象执行完毕，就是遇到await 之后，代码就暂停执行了， 等待fn(2) 执行完毕，fn(2) 返回的promise 开始执行，2秒 之后，promise resolve 执行了， 并返回了值为4， 这时await 才拿到返回值4， 然后赋值给result， 暂停结束，代码继续执行，执行 console.log语句。

总结：

async

     可以作用在任何方法前, 返回值是一个Promise对象(回调函数也可以使用async)

      函数内部return的返回值, 会成为then回调函数的参数

      async作用的方法,如果内部出现报错,可以被promise的catch方法捕获

      常规使用,一般都会通过try catch进行有可能报错的代码处理

await

 await只能作用在async修饰的方法中,不能单独使用,如果使用报错:await is only valid in async functions and the top level bodies of modules

 await是会阻塞代码执行

      正常情况 await后面跟着一个Promise对象; 返回的是Promise对象的成功后结果; 如果是一个普通值,那么会直接返回这个值

      reject的返回 await没有办法进行捕获(使用try catch进行捕获)

    

    async&await是Promise和Generator的语法糖

回调地域：

        在使用JavaScript时，为了实现某些逻辑经常会写出层层嵌套的回调函数，

        如果嵌套过多，会影响代码可读性和逻辑，这种情况被称为回调地狱。

function fn1() {
        return new Promise((resolve,reject)=>{
           setTimeout(()=>{
               resolve(1)
               console.log('1秒');
           },1000)
        })
    }
    function fn2() {
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve(2)
                console.log('2秒');
            },2000)
        })
    }
    function fn3() {
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve(3)
                console.log('3秒');
            },3000)
        })
    }
    (async function() {
        var a = fn1()
        var b = fn2()
        var c = fn3()
        await a  // 1
        await b  // 2
        await c  // 3
        console.log(a,b,c);
    })()
    // Promise.all([fn1(),fn2(),fn3()]).then(res=>{
    //     console.log(res);
    // })