---
tags: Node.js 直播班 - 2022 春季班
---
# 🏅 Day 5

## 非同步概念、async await

async 及 await 是執行非同步函式的一種寫法，此寫法可以讓非同步函式在閱讀上更接近同步函式

在非同步函式前加上 `async` 關鍵字，執行此函式時回傳值就會被轉為一個 Promise
在 `async` 非同步函式中，使用 `await` 接收回傳的結果，它會暫停此 async 函式的執行，並且等待 Promise 的解析，解析完之後會回傳解析值，並繼續此 async 函式的執行
也就是說在未等待到結果回傳前，不會執行到 `await` 之後的程式

範例：

function resolveAfter2Seconds(x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });
}


async function add1(x) {
  const a = await resolveAfter2Seconds(20);
  const b = await resolveAfter2Seconds(30);
  return x + a + b;
}

### 參考資源
[Async function / Await 深度介紹 | 卡斯伯 Blog - 前端，沒有極限](https://www.casper.tw/development/2020/10/16/async-await/)
[利用 async 及 await 讓非同步程式設計變得更容易 | MDN](https://developer.mozilla.org/zh-TW/docs/conflicting/Learn/JavaScript/Asynchronous/Promises)
[async、await 再升級](https://courses.hexschool.com/courses/1670869/lectures/38886995)（章節影片）

### 題目（將答案寫在 CodePen 並提交至回報區）
流程：
批改作業 → 檢查獎勵 → 給予獎勵 → 退學或懲罰

// 批改作業
function correctTest(name) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const score = Math.round(Math.random()*100);
      if(score >= 60) {
        resolve({
          name,
          score
        })
      } else {
        reject("您已達退學門檻")
      }
    }, 2000)
  })
}
// 檢查獎勵
function checkReward(data) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if(data.score >= 90) {
        resolve(`${data.name} 獲得電影票`);
      } else if (data.score >= 60 && data.score < 90) {
        resolve(`${data.name} 獲得嘉獎`);
      } else {
        reject(`您沒有獎品`)
      }
    }, 2000)
  })
}

將以下這段程式碼改寫為 async await 的寫法

 correctTest("小明")
  .then(data => checkReward(data))
  .then(reward => console.log(reward))
  .catch(error => console.log(error))

回覆範例：

const init = async function() {
 /* 在此填寫答案 */
}
init();

回報流程
---
請同學依照下圖教學觀看解答、回報答案:


回報格式如下圖，請在「回報區」使用註解回報答案 (為了統計人數，請同學依序加上「報數」)


<!-- 解答
const init = async function() {
try{
const studentData = await correctTest("小明");
const reward = await checkReward(studentData);
} catch (error) {
console.log(error);
}
}
init();

-->

回報區
---

| 報數 | 組別 / 名字 | codepen / hackMD / 其他回饋 |
| ---- | -------------------- | ------------------------------------------------------------------------------- |
| 1 | hsin yu | https://codepen.io/tina2793778/pen/VwyzQjW?editors=0010 |
| 2 | 2 / Vic | [codepen](https://codepen.io/hsuan333/pen/YzYJzaB) |
| 3 | 第 6 組/ Wendy | [Codepen](https://codepen.io/wendy03/pen/qBpJByM) |
| 4 | 第 4 組 / 小宥 | [codepen](https://codepen.io/yosontw21/pen/bGaxMjL) |
| 5 | 第 5 組 / Jin | [Codepen](https://codepen.io/Jin-L/pen/ExodxLE) |
| 6 | 第 9 組 / 黃士桓 | [Codepen](https://codepen.io/shr-huan-huang/pen/jOYeOey) |
| 7 | 第 2 組 / Genos | [Codepen](https://codepen.io/pb220416/pen/popKqyQ) |
| 8 | 第 3 組 / Hobby | [Codepen](https://codepen.io/hobbyling/pen/BaJqyyz) |
| 9 | 第 3 組 / HedgehogKU | [Codepen](https://codepen.io/hedgehogkucc/pen/yLpRLGX) |
| 10 | 第 2 組 / peter | [Codepen](https://codepen.io/JIAN-RONG/pen/NWXOPrj) |
| 11 | 第 4 組 / sihle | [Codepen](https://codepen.io/bugbug777/pen/jOYeEpx) |
| 12 | 第 7 組 / 程翔 | [Codepen](https://codepen.io/xxxiang/pen/MWrPYPz?editors=0010) |
| 13 | 第 1 組 / Phoebe | [Codepen](https://codepen.io/phoebe26/pen/jOYePOe) |
| 14 | 第 8 組 / Hank | [Codepen](https://codepen.io/hank-hsiao/pen/bGamdwj) |
| 15 | 第 15 組 / 皓皓 | [Codepen](https://codepen.io/cutecat8110/pen/gOoBpgv) |
| 16 | 第 11 組 / Han Lai | [Codepen](https://codepen.io/x94han/pen/qBpJdNN) |
| 17 | 第 3 組 / Justin | [Codepen](https://codepen.io/justin3737/pen/ZEvqGWd) |
| 18 | 第 14 組 / 涼二 | [Codepen](https://codepen.io/Araytsai/pen/dyJgoZR) |
| 19 | 第 3 組 / hiYifang | [Codepen](https://codepen.io/hiYifang/pen/dyJgoBd) |
| 20 | 第13組 / KFC | [Codepen](https://codepen.io/kuan-fu-chen/pen/LYegpGQ?editors=1012) |
| 21 | 第 14 組｜East | [Codepen](https://codepen.io/EastM/pen/wvpYMPe?editors=0012) |
| 22 | 第 3 組 / Larry | [Codepen](https://codepen.io/larrylinr5/pen/YzYJwmp?editors=1011) |
| 23 | Naiky | [Codepen @Naiky](https://codepen.io/naiky/pen/xxpyZMK) |
| 24 | 第 8 組 / 陳暐中 | [Codepen](https://codepen.io/wei-z/pen/MWrPywR?editors=1012) |
| 25 | 第 4 組 / Mischa | [Codepen_mischa_day5](https://codepen.io/Dorothy_0528/pen/gOoBbER?editors=0011) |
| 26 | 第 5 組 / 灰塵貓 | [Codepen](https://codepen.io/oqioqi/pen/vYpVXPX) |
| 27 | 第 4 組 / 苡安 | [Codepen](https://codepen.io/yi-an-yang/pen/mdpzOxX) |
| 28 | 第 9 組 / konstante | [Codepen](https://codepen.io/konstantechang/pen/popxEMQ?editors=0010) |
| 29 | 第 1 組 / Jerry Huang | [Codepen](https://codepen.io/sun31483/pen/VwyEPvx?editors=0012) |
| 30 | 第 3 組 / Reynold | [Codepen](https://codepen.io/chasel1020/pen/wvpYgOM) |
| 31 | 第 3 組 / Adam Hsu | [Codepen](https://codepen.io/Adam-Hsu/pen/abERJJX) |
| 32 | 第 1 組 / Claire | [Codepen](https://codepen.io/claire-chang-the-bashful/pen/qBpJrwE?editors=1011)
| 32 | 第 2 組 / wendy.li | [Codepen](https://codepen.io/rockayumitw/pen/YzYJVQQ?editors=0010) |
| 33 | 第 15 組 / Chiu | [Codepen](https://codepen.io/awdx8326/pen/YzYJQwv?editors=1011)
| 34 | 第 6 組 / Ruta | [Codepen](https://codepen.io/rue503/pen/BaJqdmW)
| 35 | 第 1 組 / kimn | [Codepen](https://codepen.io/kimn/pen/XWVxaQQ?editors=0010)
| 36 | 第 5 組 / Hazel Wu | [Codepen@HazelWu](https://codepen.io/wualnz/pen/ZEvqaeB?editors=0012)
| 37 | 海底藍 | [hackMD](https://hackmd.io/@CYndFsJLT7CA0N5Bx7tmcg/ByY1l6HV9)
| 38 | 第 1 組 / Ed Huang | [hackMD](https://codepen.io/yide1986/pen/WNdaMRg?editors=0011)
| 39 | 第 6 組 / 謦麟 | [hackMD](https://codepen.io/pvzfeusk/pen/bGamQWX?editors=0012)
| 40 | 第 2 組 / Rikkubook | [Codepen](https://codepen.io/rikkubook/pen/BaJqGeN?editors=1011)
| 41 | 第 2 組 / joe.chang | [Codepen](https://codepen.io/t7552175/pen/zYpmybX?editors=1012)
| 42 | 第 3 組 / 小葉 | [hackMD](https://hackmd.io/@FyKv37KcRSWqAO_e336w8g/BySgV5L49)
| 43 | 0 / Aya | [Codepen](https://codepen.io/NoNameNote/pen/qBpJgyq) |
| 44 | nick6303 | [Codepen](https://codepen.io/nick6303/pen/bGaQbrK?editors=1111)
| 45 | 第 14 組 / Uniza | [Codepenn](https://codepen.io/unizalin/pen/rNpQBJB?editors=1011)|
| 46 | 第 11 組 / mandy | [Codepenn](https://codepen.io/manyu1225/pen/ZEXRxOw)|
| 47 | 第 1 組 / snow | [Codepen](https://codepen.io/snowsuika/pen/QWaJgxb)|
| 48 | 第 10 組 / Otis | [Codepen](https://codepen.io/humming74/pen/VwyVWJV?editors=0011)|
| 49 | 第 15 組 / yolala | [Codepen](https://codepen.io/chiakilalala/pen/gOoQRgB) |
| 50 | 第 5 組 / Nap | [Codepen](https://codepen.io/o0o0o1o0/pen/eYyQbbK) |
| 51 | 第 15 組 / Tofu | [Codepen](https://codepen.io/Tofutseng/pen/RwxqOKz?editors=1010) |
| 52 | 第 12 組 / Jimmy | [Codepen](https://codepen.io/JimmyChangWenChi/pen/popQMPP?editors=0012) |
| 53 | 第 5 組 / sihyun | [Codepen](https://codepen.io/siyuch/pen/ExoGyYV?editors=1111) |
| 54 | 第 6 組 / 馨云 | [Codepen](https://codepen.io/bigheadyun/pen/YzYdaxE) |
| 54 | 第 10 組 / 橘子 | [Codepen](https://hackmd.io/hlesnRBcRqWldNPxAsRRtQ?view) |
| 55 | 第 10 組 / Butters | [Codepen](https://hackmd.io/pbPWItdFRsG_JBb3Vxp4yw?view) |
| 56 | 第 8 組 / Jordan Tseng | [Codepen](https://codepen.io/jordan-ttc-design/pen/yLpGdKB?editors=0011) |
| 57 | 第 1 組 / Emily Hsi | [Codepen](https://codepen.io/EmilyHsi/pen/GRyzQaW) |
| 58 | 第 8 組 / Albert | [Codepen](https://hackmd.io/@Albertnotes/HJc2ExaN5) |
| 58 | 第 7 組 / jason06286 | [hackMD](https://hackmd.io/1ZDyfgOWTMGC5ZFL7wTglg) |
| 59 | 第 5 組 / AmberCYT | [Codepen](https://codepen.io/amberTing/pen/YzYbWqK?editors=1011) |
| 60 | 第 5 組 / TracyChien | [Codepen](https://codepen.io/tracychien-the-encoder/pen/WNMeZWB?editors=0011) |
| 61 | 第 12 組 / Sylvia-H | [Codepen](https://codepen.io/Cosmosheart/pen/XWZmVOa?editors=0011) |
| 62 | 第 14 組 / 皮皮 | [Codepen](https://codepen.io/super-shrimp/pen/eYVxbxx?editors=0011) |