JavaScript 核心觀念(81) - ES6 章節:Async/Await - 使用 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 可以大幅減少程式碼的複雜度以及優化。

參考文獻