JavaScript 非同步與同步事件之 async

前言

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

async

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

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 的錯誤訊息 ↓

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