async await

async

用于声明异步函数，返回值为一个Promise 对象，它以类似"同步"的方式来写异步方法，语法与声明函数类似

返回值

返回值是 Promise 对象，异步结果是通过  .then()  或者 .catch() 方法来获取并进行进一步处理的，定义的异步函数中的返回值会当成 resolve  状态来处理，一般用 .then() 方法处理，而如果定义的异步函数抛出错误，例如变量未定义，则会被当做reject状态来处理，一般使用.catch() 方法来处理。

await

用法顾名思义，有等待的意思。

let value = await Promise();

其实就是暂停当前async function内部语句的执行,等待后面的 Promise() 处理完返回结果后,再继续执行async function函数内部剩余的代码。 

注意!

await  必须在 async 函数内部使用    如果await 后面跟的是其它值   则直接返回该值

下面代码需要用Vue运行

<template>
  <div></div>
</template>

<script>
export default {
  created() {
    async function fn() {
      console.log("我"); //  返回值1
      await new Promise(function (resolve) {
        setTimeout(function () {
          console.log("吃"); //  返回值2
          resolve();
        }, 5000);
      });
      console.log("饭"); //  返回值3    返回值3基于返回值2的返回时间
    }
    fn();
  },
};
</script>

<style></style>

下面的是未加await的代码

<template>
  <div></div>
</template>

<script>
export default {
  created() {
    async function fn() {
      console.log("我"); //  返回值1
      new Promise(function (resolve) {
        setTimeout(function () {
          console.log("吃"); //  返回值3
          resolve();
        }, 5000);
      });
      console.log("饭"); //  返回值2    没有加await就会出现异步
    }
    fn();
  },
};
</script>

<style></style>

返回结果

和上面说的一样   await  会等后面的Promise 返回结果后才会执行async函数里面剩余的代码