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

0%