JavaScript 非同步與同步事件之 async

前言

上一章節已經講完 await 後接下來當然是 async 啦,有同步就有非同步,所以這邊來記錄一下 async。

async

async 在翻譯上就是非同步的意思,其實與 Promiss 做法很像,但是必須使用在函式中,然後要 return 回傳 resolved,所以這邊就不多做廢話直接來玩 ↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
let runPromiss = (name, time, status) => {
return new Promise((resolve, reject) => {
if(status) {
console.log(`${name} 起跑了!`)
return setTimeout(() => {
resolve(`${name} 衝了 ${time / 1000}秒`)
},time);
} else {
reject(new Error(`${name} 出現錯誤`));
};
});
};
// 小明失敗,就回傳錯誤訊息

let asyncPromise = async function() {
let min = await runPromiss('小明', 3000, true);
let wei = await runPromiss('小王', 1000, true);
return `${min},${wei}`;
}
asyncPromise().then((res)=>{
console.log(res)
}).catch((error) => {
console.log(error);
});

console.log('我偷偷執行了');

async

但是這邊有 asyne 有一點特別就是,當另一個人跑失敗了,並不會影響其他程式碼的運行,所以我們可以先做其他的事情,而且也會得到一個 reject 的錯誤訊息 ↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
let runPromiss = (name, time, status) => {
return new Promise((resolve, reject) => {
if(status) {
console.log(`${name} 起跑了!`)
return setTimeout(() => {
resolve(`${name} 衝了 ${time / 1000}秒`)
},time);
} else {
reject(new Error(`${name} 出現錯誤`));
};
});
};
// 小明失敗,就回傳錯誤訊息

let asyncPromise = async function() {
let min = await runPromiss('小明', 3000, false);
let wei = await runPromiss('小王', 1000, true);
return `${min},${wei}`;
}
asyncPromise().then((res)=>{
console.log(res)
}).catch((error) => {
console.log(error);
});

async

所以其實 async 寫起來很像 Promise,但是可以使程式碼更簡潔集中。

參考資料

Day 14 - 二周目 - 從Promise 昇華到 async/await

JavaScript Await 與 Async

Liker 讚賞

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

Buy Me A Coffee Buy Me A Coffee

Google AD

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