async和await的使用

async和await的使用

• async

  • async函式返回一個 Promise 物件，可以使用 then 方法新增回撥函式
  • async 函式中可能會有 await 表示式，async 函式執行時，如果遇到 await 就會先暫停執行 ，等到觸發的非同步操作完成後，恢復 async 函式的執行並返回解析值，假如非同步操作 reject，則不再執行後面的操作

• await

  • await 運算子用於等待一個 Promise 物件, 它只能在非同步函式 async function 內部使用
  • 返回 Promise 物件的處理結果。如果等待的不是 Promise 物件，則返回該值本身
  • 如果一個 Promise 被傳遞給一個 await 運算子，await 將等待 Promise 正常處理完成並返回其處理結果
  • 正常情況下，await 命令後面是一個 Promise 物件，它也可以跟其他值，如字串，布林值，數值以及普通函式
  • await針對所跟不同表示式的處理方式：
    • Promise 物件：await 會暫停執行，等待 Promise 物件 resolve，然後恢復 async 函式的執行並返回解析值，假如 Promise 物件 reject，async函式不再執行後面的操作
    • 非 Promise 物件：直接返回對應的值

• 使用

  const getHasUser1 = async (pager = 1) => {
    pageNo.value = pager
    let result: UserResponseData = await reqUserInfo(pageNo.value, pageSize.value)
    if (result.code === 200) {
      total.value = result.data.total
      userArr.value = result.data.records
    }
  }
  const getHasUser2 = async (pager = 1) => {
    pageNo.value = pager
    await reqUserInfo(pageNo.value, pageSize.value)
    console.log('success')
  }
  

  • 函式1中result可以獲取 reqUserInfo 函式返回的 Promise 物件 resolve 結果，進行後續判斷
  • 函式2中，假如 reqUserInfo 函式 Promise 物件 resolve，繼續執行後續操作，假如 Promise 物件 reject，不再執行後續操作

• try...catch...可以捕獲 Promise 物件 reject 的資訊

• 通俗：async函式里面出現await，表示需要等到某一函式成功返回的結果再執行後續的操作，假如函式reject，不再執行後續操作