※ 認識非同步概念(四)

更新於 2024/05/02發佈於 2024/05/02閱讀時間約 6 分鐘

認識 async/await基本概念：

async 的本質是 promise 的語法糖，只要 function 標記為 async，就表示裡頭可以撰寫 await 的同步語法，而 await 顧名思義就是「等待」，它會確保一個 promise 物件都解決 ( resolve ) 或出錯 ( reject ) 後才會進行下一步，當 async function 的內容全都結束後，會返回一個 promise。

Async/Await 語法結構：

使用時要把握三個原則：

要先確認有 Promise 物件實例，也就是已經定義好 resolve/reject，才能使用 async/await
在流程中正確設定關鍵字：

把後續流程用一個 async function 包裝起來
設定好 async function 之後，在要運用非同步處理的地方加上 await 關鍵字

注意 async/await 和 then 不可以混搭使用

錯誤處理：需要進行錯誤處理時，會採用 try...catch ，在更外層包一層 `try {}`

什麼時候可以用 async/await？

在使用 async/await 前，需要先確認有 Promise 物件。意思就是說，如果原本是用 callback function，還是要先封裝成 Promise。

async/await範例(一)：

function getFirstInfo() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('first data')
    }, 1000)
  })
}
function getSecondInfo() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject('second error')
    }, 2000)
  })
}

async function getGroupInfo() {
  //接到reject處理錯誤
  try {
  //接到resolve處理成功
     //代表等到第一筆資料回傳後,才印出結果和請求第二筆資料
    const firstInfo = await getFirstInfo()
    console.log(firstInfo)
    //代表等到第二筆資料回傳後,才印出結果
    const secondInfo = await getSecondInfo()
    console.log(secondInfo) 
  } catch(err) {
    console.log("err", err)
    }
  
}
getGroupInfo()//印出"first data", "err", "second error"

範例(二)：

Promise.all寫法：

function getFirstInfo() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      //1秒後回傳結果
      resolve('first data')
    }, 1000)
  })
}
function getSecondInfo() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
       //2秒後回傳結果
      resolve('second data')
    }, 2000)
  })
}
Promise.all([ getFirstInfo(), getSecondInfo()])
.then(([firstInfo, secondInfo]) => {
 console.log(firstInfo)
 console.log(secondInfo)
}) //印出"first data", "second error"

async/await寫法：

function getFirstInfo() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      //1秒後回傳結果
      resolve('first data')
    }, 1000)
  })
}
function getSecondInfo() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
       //2秒後回傳結果
      resolve('second data')
    }, 2000)
  })
}
async function getGroupInfo() {
  try {
    const firstInfo =  getFirstInfo()
    const secondInfo =  getSecondInfo()
    //同步發出非同步請求,並等到兩秒後(非三秒)成功獲得兩筆回傳後,才印出結果
    const [firstData, secondData] = await Promise.all([firstInfo, secondInfo])
    console.log(firstData, secondData)
  } catch(err) {
    //處理錯誤回傳
    console.log( error)
    }
  }
getGroupInfo()//印出"first data", "second error"