JavaScript 核心觀念(81) - ES6 章節：Async/Await - 使用 Async Function 改寫實戰範例

發表於 分類於

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你 ヽ(・∀・)ﾉ

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

Buy Me A Coffee ｜ Buy Me A Coffee
前面講了很多理論的概念，但實際上來講還是要套用到實戰上才會比較清楚，因此接下來會來講一下實戰上會如何使用 Async Function。

前言

前面講了很多理論的概念，但實際上來講還是要套用到實戰上才會比較清楚，因此接下來會來講一下實戰上會如何使用 Async Function。

使用 Async Function 改寫實戰範例

那麼在實戰上最常使用的套件就是 axios 套件，因此建議你可以先引入 Axios CDN，如果懶得找的話，我這邊提供給你

1
<script src='https://cdnjs.cloudflare.com/ajax/libs/axios/0.9.1/axios.min.js' integrity='sha512-Xk3wWei2TGrsh9kDSBKUMIjw/86sLUvhtnv9f7fOuIwhhiUTKz8szkWkzHthrM5Bb3Bu9idSzkxOrkzhcneuiw==' crossorigin='anonymous'></script>

這邊將會使用 JSON Placeholder 當作示範，因此我們在實際上串接 API 就會像以下寫法

1
2
3
4
5
6
7
axios.get('https://jsonplaceholder.typicode.com/todos/1')
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.log(err);
  })

那麼如果要發出多個請求就是使用 Promise.all

1
2
3
4
5
6
7
Promise.all([
  axios.get('https://jsonplaceholder.typicode.com/todos/1'),
  axios.get('https://jsonplaceholder.typicode.com/todos/2')
])
  .then((res) => {
    console.log(res);
  })

接下來如果要改成 Async Function 呢？這樣的話該如何調整呢？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const getData = async (url) => {
  try {
    const res = await axios.get(url);
    return res;
  } catch (error) {
    return error;
  }
}

Promise.all([
  getData('https://jsonplaceholder.typicode.com/todos/1')
  getData('https://jsonplaceholder.typicode.com/todos/1')
])
  .then((res) => {
    console.log(res);
  }).catch((error) => {
    console.log(error);
  })

那麼透過這樣改寫可以看到整體程式碼簡潔很多，基本上上面只有使用到參數來傳遞 url 參數。

當然你也可以乾脆這樣寫

1
2
3
4
5
6
7
8
9
10
11
const getData = async (url) => {
  try {
    const res = await Promise.all([
      axios.get('https://jsonplaceholder.typicode.com/todos/1'),
      axios.get('https://jsonplaceholder.typicode.com/todos/2')
    ])
    return res;
  } catch (error) {
    return error;
  }
}

剛剛前面也有提到 async function 執行之後會轉換為 Promise 語法，因此也可以接上 then

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const getData = async (url) => {
  try {
    const res = await Promise.all([
      axios.get('https://jsonplaceholder.typicode.com/todos/1'),
      axios.get('https://jsonplaceholder.typicode.com/todos/2')
    ])
    return res;
  } catch (error) {
    return error;
  }
}

getData()
  .then((res) => {
    console.log(res);
  })
  .catch((error) => {
    console.log(error);
  })

那麼這一章節最終的核心重點只有一件事情 Promise，也就是本身 async 是一個 Promise 透過 async 可以大幅減少程式碼的複雜度以及優化。

參考文獻