async、await的使用和解析

async

我们在编写代码时，有时候可能会编写异步函数，在拿到函数执行结果后，对结果进行处理，在ES6中，我们通常会用Promise来处理这些异步函数，把运行拿到的结果放进resolve里面，然后在then中进行成功时的回调。而在ES7中，允许我们使用async关键字来将一个函数转化为异步函数。让我们一起来看看async的用法吧！
我们需要在函数前面加上async，使之变成异步函数，比如：

async function foo1() {

}

const foo2 = async () => {

}

class Foo {
  async bar() {

  }
}

如果在async函数里面没有用await时，这个async函数的执行顺序和普通函数的执行顺序是一致的。
返回值:
async函数的返回值一定是一个Promise,如果在函数内部未返回任何值，那么相当于返回undefined，那么相当于整个函数返回的结果是Promise.resolve(undefined)。当返回值是一个数的时候，相当于返回的是Promise.resolve(这个数)。另外，异步函数中的异常, 会被作为异步函数返回的Promise的reject值的
比如：

async function foo() {
    throw new Error("error message")
}
foo().then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);//error message
})

await

await关键字一般是在async函数里面结合使用的
await关键字有什么特点呢？

• 通常使用await是后面会跟上一个表达式，这个表达式会返回一个Promise；那么await会等到Promise的状态变成fulfilled状态，之后继续执行异步函数；
• 如果await后面是一个普通的值，那么会直接返回这个值；
• 如果await后面是一个thenable的对象，那么会根据对象的then方法调用来决定后续的值；
• 如果await后面的表达式，返回的Promise是reject的状态，那么会将这个reject结果直接作为函数的Promise的reject值

// 1.await跟上表达式
function requestData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            // resolve(222)
            reject(1111)
        }, 2000);
    })
}

async function foo() {
    const res1 = await requestData()
    console.log("后面的代码1", res1)
    console.log("后面的代码2")
    console.log("后面的代码3")

    const res2 = await requestData()
    console.log("res2后面的代码", res2)
}

// 2.跟上其他的值
// async function foo() {
//   // const res1 = await 123
//   // const res1 = await {
//   //   then: function(resolve, reject) {
//   //     resolve("abc")
//   //   }
//   // }
//   const res1 = await new Promise((resolve) => {
//     resolve("why")
//   })
//   console.log("res1:", res1)
// }

// 3.reject值
// async function foo() {
//   const res1 = await requestData()
//   console.log("res1:", res1)
// }

foo().catch(err => {
    console.log("err:", err) //err:1111
})