前言
上一章節已經講完 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('我偷偷執行了');
|

但是這邊有 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 寫起來很像 Promise,但是可以使程式碼更簡潔集中。
參考資料
Day 14 - 二周目 - 從Promise 昇華到 async/await
JavaScript Await 與 Async