promise和async await的区别

在项目中第一次遇到async await的这种异步写法，来搞懂它👀

项目场景 ：点击登录按钮后执行的事件，先进行表单校验 this.$refs.loginFormRef.validate（element库中的规则），校验成功后向服务端发送请求，getLogindata是我封装的axios请求函数，返回值是promise。

export function getLogindata(loginForm) {
  return request1({
    url: '/login',
    data: loginForm
  })
}

1、用async await

      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) return;
        const result = await getLogindata(this.loginForm);
        console.log(result);
      });

控制台结果：

2、用promise

      this.$refs.loginFormRef.validate(valid => {
        if (!valid) return;
        const result = getLogindata(this.loginForm)
        console.log(result);
      });

控制台结果：

      this.$refs.loginFormRef.validate(valid => {
        if (!valid) return;
        getLogindata(this.loginForm).then(res => {
          console.log(res);
        });
      });

控制台结果：

从三个控制台的返回结果可以看到，getLogindata函数加上await后返回值结果就是promise执行reslove/then后得到的结果，所以await getLogindata()就是表示会等到getLogindata的promise成功reosolve之后才得到结果。

通俗易懂的解释：

1、async修饰的函数是一个异步函数，async修饰的函数也带有then catch方法，因此，经async修饰的函数也是一个promise。await关键字只能用在aync定义的函数内。
2、Promise的出现解决了传统callback函数导致的“地域回调”问题，但它的语法导致了它向纵向发展行成了一个回调链，遇到复杂的业务场景，这样的语法显然也是不美观的。
而async await代码看起来会简洁些，使得异步代码看起来像同步代码，await的本质是可以提供等同于”同步效果“的等待异步返回能力的语法糖，只有这一句代码执行完，
才会执行下一句。async/await使得异步代码看起来像同步代码，这正是它的魔力所在
3、简单来看，这两者除了语法糖不一样外，他们解决的问题、达到的效果是大同小异的，我们可以在不同的应用场景，根据自己的喜好来选择使用。