初識

async 函數表示這個函數內部有異步請求,如果這個 async 函數沒有返回值,那么這個 async 僅僅只是一個標識而已.

創(chuàng)新互聯(lián)專注于牟平網站建設服務及定制，我們擁有豐富的企業(yè)做網站經驗。 熱誠為您提供牟平營銷型網站建設，牟平網站制作、牟平網頁設計、牟平網站官網定制、小程序制作服務，打造牟平網絡公司原創(chuàng)品牌,更為您提供牟平網站排名全網營銷落地服務。

await 需要結合 async 函數一起使用,它通常用于等待一個 Promise 函數或 async 函數的執(zhí)行(你當然可以寫個await 123,但這不會有任何作用)

先看代碼

console.log(1);
(async function () {
    console.log(2);
    const res = await req(); // 隨意定義一個返回值是Promise的函數
    console.log(3);
    if (res[0]) {
        throw new Error(res[0]);
    } else {
        console.log("請求成功");
    }
})();
console.log(4);

如果對 Promise 很了解的話,應該很快能看出控制臺的輸出順序是 1 2 4 3 "請求成功",如果你判斷錯誤了也沒關系,實際開發(fā)中多用用就熟悉了.筆者也經常會判斷失誤.

進階

上面說到 async 函數如果沒有返回值則這僅僅只是一個標識,那么如果有返回值呢?

async function get() {
    return 123;
}
const f = get(); // Promise { 123 }

上面代碼可以看出 async 函數返回了一個 Promise 對象.

作用就是你可以不用再在一個函數里手寫return new Promise((resolve, reject)=>{})了,這里的 return 相當于 Promise 里的 fulfilled 狀態(tài)

要注意的是在 Promise 中是使用resolve()返回正常值,reject()返回異常值

在 async函數 中使用return返回正常值,使用拋出錯誤throw new Error()返回異常值

function (a,b) {
  return async function () {
    const res = await getSomething({a,b});
    if (res.code === 200) {
      return [res.data.rows];
    } else {
      throw new Error(res.msg);
    }
  };
}

處理異常

拋出錯誤那勢必就要處理錯誤.而處理錯誤的方式也是有好幾種的,我只在這里寫我推薦的 Error First 思想, 另一個方法是傳統(tǒng)的 try catch

async function sendReq() {
    const res = await getSomething().then((res) => [null, res]).catch((error) => [error, null]);
    if (res[0] !== null) {
        // 錯誤邏輯
        console.error(error);
        return;
    }
    // 正確邏輯
    console.log(res[1]);
}

上面的代碼,在 await 函數后面加上.then().catch(),在學習Promise的時候,我們知道Promise的then方法是處理resolve,then后的catch方法是處理reject,并且這兩個也都會返回一個Promise,因此再使用await接收then或catch返回的Promise即可.

返回的值為一個數組,發(fā)生錯誤的時候把錯誤放到數組的第一位,這種思想稱之為Error First思想.很方便判斷是否出錯.