Async Await

發表於 更新於 分類於
使用 async await 來處理非同步程式

promise的作法

傳統的promise寫法，我們會用 .then()去接收成功的結果，.catch()接收失敗的結果。但不斷用.then去接收結果，程式上的可讀性較差，所以可以改用async await的寫法來改寫。

async await

async 的使用方法很簡單，只要在定義 function 時，前面加個 async 就可以了。而 await 會接收promise執行完的結果，等 Promise 執行完再執行下一行，後面的任務會等前面的任務完成後才繼續下去。

如果想接收錯誤的結果，可以用try catch寫法，將所有可能出錯的程式放在try裡，當有程式回傳錯誤時，會立即停止，並執行catch裡的程式

當 async function 的內容全都結束後，會返回一個 promise，這表示後方可以使用.then語法來做連接，基本的程式長相就像下面這樣：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
async function a(){
  await b();
  .....       // 等 b() 完成後才會執行
  await c();
  .....       // 等 c() 完成後才會執行
  await new Promise(resolve=>{
    .....
  });
  .....       // 上方的 promise 完成後才會執行
}

a();
a().then(()=>{
  .....       // 等 a() 完成後接著執行
});

範例參考:

另一個串接範例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const asyncFn = async(num) {
  try {
    const res = await promiseFn(1);
    return res;
  } catch(err) {
    throw new Error('失敗');
  }
}
// async function 本身就會回傳 promise 可以用 .then .catch 串接。
asyncFn(0)
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.log('錯誤', err);
  })

節省 try catch 的作法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const catchError = (asFn) => {
  return (n) => {
    return asFn(n).catch((err) => {
      console.log('catch', err);
    })
  }
}

const asyncFn = (n) => {
  const res = await promiseFn(n);
}

const catchFn = catchError(asyncFn);
catchFn(1);
catchFn(2);

// 若不想寫那麼多也可以直接執行
catchError(asyncFn)(1);

如果想要節省在 async function 裡處理錯誤的 try catch 語法，可以將 catch 的語法包裝在 catchError 裡。