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、簡單來看，這兩者除了語法糖不一樣外，他們解決的問題、達到的效果是大同小異的，我們可以在不同的應用場景，根據自己的喜好來選擇使用。