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 讚賞 (拍手)

如果這一篇筆記文章對你有幫助,希望可以求點支持或 牡蠣 鼓勵 (ノД`)・゜・。

Liker 是一個按讚(拍手)的讚賞機制,每一篇文章最多可以按五下拍手,過程你只需要登入,如果你願意按個讚,對於創作者來講是一個莫大的鼓勵與支持。

Google AD

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