是 Ray 不是 Array

整理這些技術筆記真的很花時間，如果你願意 關閉 Adblock 支持我，我會把這份感謝轉換成更多「踩坑轉避坑」的內容給你！ヽ(・∀・)ﾉ

Advertisement
2022-05-14 JavaScript

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

#JavaScript #Promise #Async #Await #JavaScript 核心篇 #ES6 章節：Async/Await #Axios

前言

前面講了很多理論的概念，但實際上來講還是要套用到實戰上才會比較清楚，因此接下來會來講一下實戰上會如何使用 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 可以大幅減少程式碼的複雜度以及優化。

參考文獻

整理這些技術筆記真的很花時間，如果你願意 關閉 Adblock 支持我，我會把這份感謝轉換成更多「踩坑轉避坑」的內容給你！ヽ(・∀・)ﾉ

Advertisement

你的支持會直接轉換成更多技術筆記

如果我的筆記讓你少踩一個坑、節省 Debug 的時間，
也許你可以請我喝杯咖啡，讓我繼續當個不是 Array 的 Ray ☕

buymeacoffee | line | portaly

Terminal

相關文章

JavaScript 核心觀念(82) - ES6 章節：Async/Await - 撰寫高可用性高的錯誤捕捉

2022-05-15

JavaScript 核心觀念(80) - ES6 章節：Async/Await - Async Function 與 Promise 之間的關聯性

2022-05-13

JavaScript 核心觀念(79) - ES6 章節：Async/Await - 為什麼要使用 Async 與基本介紹

2022-05-13

JavaScript 中的 Promise 是什麼？以及為什麼你要懂 Promise

2021-11-28

分享這篇文章

留言

© 2025 Ray. All rights reserved.

Powered by Ray Theme