async...await 的一些使用總結

async...await 的一些使用總結

關於 async

它會隱式返回一個 Promise 對象

async func () {
  return 'a'
}

// 等價於
func () {
  return new Promise((resolve, reject) => {
    resolve ('a')
  })
}

async func () {
  return new Promise(resolve, reject) => {
    resolve ('a')
  })
}

// 等價於
func () {
  let promise = return new Promise((resolve, reject) => {
    resolve('a')
  })
  return new Promise((resolve) => resolve(promise))
}

async func 中有 return 'a', 等價於 func 中 new Promise 的 resolve('a')
async func 中有 throw Error('a'), 等價於 func 中 new Promise 的 reject('a')

關於 await

await 後面跟的是 Promise 對象，如果不是，也會轉換成 Promise 對象。
如 const res = await 'hello', 等價於 const res = await Promise.resolve('hello')
try … catch() 中的 catch() 會捕獲到 Promise 的異常，下面的代碼是我經常使用的

async function func() {
  try {
    const res = await Promise.reject(30);
  } catch (err) {
    console.log(err); // 30
  }
}

func();

依次順序執行異步操作

// 先執行 task1，等 res1 有結果後，再執行 task2
async func () {
  const res1 = await task1()
  const res2 = await task2()
}

並行執行異步操作

func () {
  task1()
  task2()
  task3()
}

或者，

async func () {
  const promise1 = task1()
  const promise2 = task2()
  const res1 = await promise1
  const res2 = await promise2
}

或者，

async function func () { 
  await Promise.all([task1(), task2(),task3()])
  console.log('三個任務執行完畢')
  // 全部執行完畢後，接着後面的代碼
}