JS:Async函數跟Promise簡記

Async函數跟Promise簡記

async函數是ES2017(ES8)才支援的功能。不過我最近工作使用React-Native 0.63版預設都有了。

async函數內可用await關鍵字，等待async/promoise的執行結果，而且arrow function也可用aync關鍵字，這裡以fetch這個async函數簡易示範如下:

const MyAsync = async () => {

  return await fetch('http://tw.yahoo.com');

}

如果寫Promise的話，應該是像下面這樣[備註]:

const MyPromise = () => new Promise((resolve, reject) => {

  setTimeout(()=> {

    fetch('http://tw.yahoo.com')

      .then(res => {resolve(res)})

      .catch(err => {reject(err)})

  },0);

});

有文章提到其實async-await只是語法糖，所以其實兩者可以混用，只是寫法不一樣。

1. 呼叫MyAsync使用Promise chain
   MyAsync()
     .then(res => {
       console.log('got result', res);
     })
     .catch(err => {
       console.log('got error', err);
     })
2. 呼叫MyPromise使用Promise chain
   MyPromise()
     .then(res => {
       console.log('got result', res);
     })
     .catch(err => {
       console.log('got error', err);
     })
3. 在async函數內呼叫MyAsync使用await
     try {
       let res = await MyAsync();
       console.log('got result', res);
     } catch(err) {
       console.log('got error', err);
     }
4. 在async函數內呼叫MyPromise使用await
     try {
       let res = await MyPromise();
       console.log('got result', res);
     } catch(err) {
       console.log('got error', err);
     }

如果你是在一般的函數中呼叫async和Promise就應該使用前兩種方法的Promise chain來進行非同步處理。反之如果你是在async函數內呼叫async/Promise就應該搭配await關鍵字來處理。

我個人總結async函數就是一種比較好看懂得promise，只是要注意如果你想要中斷整個async函數是用throw exception而不是用return來處理。

備註:這裡的setTimeout對於fetch這種async函數來說，其實是完全不需要的，這裡只是寫一個紀錄如果你改天換成呼叫一般函數，會需要setTimeout來協助執行非同步處理。