Async和Await

回调地狱

回调地狱就是在js代码中，回调函数回调的太多，回调套着回调，很难看懂代码。

下面这张图就是一个经典的回调地狱：

解决回调地狱的办法

1.写的浅一点，不要嵌套太深。

2.使用模块化。

3.对错误进行单独的处理

Async和Await

async返回的函数是一个Promise 对象 ，当函数执行的时候，一旦遇到await 就会返回，进行异步操作，等这段代码执行完毕之后，在进行下一步操作。

Async起什么作用

主要看async怎么处理它的返回值：首先看一段代码

async function testAsync() {
  return "hello async";
}
const result = testAsync();
console.log(result);

最后看到他的返回值是一个promise：

所以，async 函数返回的是一个 Promise 对象。从文档中也可以得到这个信息。async 函数（包含函数语句、函数表达式、Lambda表达式）会返回一个 Promise 对象，如果在函数中return一个直接量，async 会把这个直接量通过Promise.resolve()封装成 Promise 对象。

Await起什么作用

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

function fn(num) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(num * 2)
    }, 2000)
  })
 
}
 
async function test() {
  let result = await fn(2)
  console.log(result)
}

 总结：

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的语法糖