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

### 非同步概念、使用 Promise

### 使用 Promise 簡介
Promise 是一個物件，代表一個即將完成或失敗的非同步操作，以及回傳的值
建立 Promise 的寫法為：

function example() {
  new Promise((resolve, reject) => {
  // 執行一些非同步作業，最終呼叫:
  //
  // resolve(someValue); // 實現
  // 或
  // reject("failure reason"); // 拒絕
  } )
} 

建立好 Promise 後，執行此函式就可以在完成 Promise 時使用 `.then()` 接收回傳的 Promise 物件，以及使用 `.catch()` 接收錯誤，因 Promise 可以用鍊式寫法接收上一個 Promise 的回傳值，不需像使用 callback function 一層包一層，因此可以提昇易讀性

example()
  .then(data => 
    useData(data)
  )
  .catch(error =>
    console.log(error)
  )

### 參考資源
[使用 Promises 來處理非同步操作](https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/Asynchronous/PromisesTW/docs/Learn/JavaScript/Asynchronous/Introducing)
[JavaScript Promise 全介紹 | 卡斯伯 Blog - 前端，沒有極限](https://www.casper.tw/development/2020/02/16/all-new-promise/)
[Node.js 非同步技巧 - Promise、Async、Await](https://courses.hexschool.com/courses/1670869/lectures/38886982)(章節影片)

### 題目（將答案寫在 CodePen 並提交至回報區）
請嘗試使用 Promise 的鍊式寫法 `.then()` `.catch()` 執行以下函式
**執行流程**：
批改作業 → 檢查獎勵 → 給予獎勵 `.then()` → 退學或懲罰 `.catch()`

// 批改作業
function correctTest(name) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const score = Math.round(Math.random()*100);
      if(score >= 20) {
        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)
  })
}
// 執行函式
/* 在此填寫答案*/

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


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


<!-- 解答
correctTest("小明")
.then(data => checkReward(data))
.then(reward => console.log(reward))
.catch(error => console.log(error))

-->

回報區
---

| 報數 | 組別 / 名字 | codepen / hackMD / 其他回饋 |
| ---- | ------------------------ | ------------------------------------------------------------------------ |
| 1 | 第 6 組 / Ruta | https://codepen.io/rue503/pen/ZEvRVeN | |
| 2 | 第 6 組 / Wendy | https://codepen.io/wendy03/pen/vYprvyx | |
| 3 | 第 9 組 / 黃士桓 | https://codepen.io/shr-huan-huang/pen/GRyGPjv | |
| 4 | 第 2 組 / Vic | https://codepen.io/hsuan333/pen/vYprvxm | |
| 5 | 第 5 組 / sihyun | https://codepen.io/siyuch/pen/YzYvdrV?editors=0011 | |
| 6 | 第 3 組 / HedgehogKU | https://codepen.io/hedgehogkucc/pen/wvpXRjE?editors=0112 | |
| 7 | 第 2 組 / Genos | https://codepen.io/pb220416/pen/popKqyQ | |
| 8 | 第 2 組 / Jin | https://codepen.io/Jin-L/pen/gOoKZJj | |
| 9 | 第 8 組 / Hank | https://codepen.io/hank-hsiao/pen/zYpaeNZ | |
| 10 | 第 3 組 / hiYifang | https://codepen.io/hiYifang/pen/wvpXOGW | |
| 11 | 第 15 組 / Cadiis | https://codepen.io/dronzefeng/pen/JjMZzqP | |
| 12 | 第 8 組 / JackLee | https://codepen.io/yxzzktmb/pen/OJzEGVx | |
| 13 | 第 2 組 / peter.chen1024 | https://codepen.io/JIAN-RONG/pen/ExoRJRP?editors=0012 | |
| 14 | 第 7 組 / 程翔 | https://codepen.io/xxxiang/pen/gOoKJRq?editors=1011 | |
| 15 | 0 / Aya | https://codepen.io/NoNameNote/pen/NWXzmbz | |
| 16 | 第 14 組 / East | [codepen](https://codepen.io/EastM/pen/VwydJvN?editors=0011) | |
| 17 | 第 10 組 / Butters | [codepen](https://codepen.io/Butterscode/pen/oNpyRWq) | |
| 18 | 第 4 組 / 苡安 | [codepen](https://codepen.io/yi-an-yang/pen/ExoRBwO) | |
| 19 | 第 3 組 / Hobby | [codepen](https://codepen.io/hobbyling/pen/WNdyqoR) | |
| 20 | 第 11 組 / Han Lai | [codepen](https://codepen.io/x94han/pen/wvpXLXJ) | |
| 21 | 第 4 組 / Han Lai | [codepen](https://codepen.io/bugbug777/pen/dyJKxpX) | |
| 22 | 第 3 組 / Reynold | [codepen](https://codepen.io/chasel1020/pen/xxpzvPZ) | |
| 23 | 第 4 組 / 小宥 | [codepen](https://codepen.io/yosontw21/pen/ExoRqZx?editors=1111) | |
| 24 | 第 2 組 / joe | [codepen](https://codepen.io/t7552175/pen/qBpKzvW?editors=1011) | |
| 25 | 第 8 組 / Jordan Tseng | [codepen](https://codepen.io/jordan-ttc-design/pen/oNpMvEd?editors=1011) | |
| 26 | 第 1 組 / Jerry Huang | [codepen](https://codepen.io/sun31483/pen/qBpyBNL?editors=0010) | |
| 27 | 第 9 組 / konstante | [codepen](https://codepen.io/konstantechang/pen/JjMBjoa?editors=0010) | |
| 28 | 第 3 組 / 小葉 | [codepen](https://codepen.io/Yu__hung/pen/XWVBJxb) | |
| 29 | nick6303 | [codepen](https://codepen.io/nick6303/pen/GRyBJVV?editors=1111) | |
| 30 | 第 1 組 / Snow | [codepen](https://codepen.io/snowsuika/pen/rNprVRz) | |
| 30 | 第 3 組 / charlie ku | [codepen](https://codepen.io/CharlieKu50503/pen/XWVBXKw?editors=0112) | |
| 31 | 第 14 組 / ChloeLo | [codepen](https://codepen.io/chloelo/pen/NWXBxZo) | |
| 32 | 第 16 組 / 皓皓 | [codepen](https://codepen.io/cutecat8110/pen/abEjZGP) |
| 32 | Naiky | [CODEPEN @Naiky](https://codepen.io/naiky/pen/xxpyZav) |
| 33 | 海底藍 | [codepen](https://codepen.io/registermar3/pen/OJzwRbx?editors=0011) | |
| 34 | yolala | [codepen](https://codepen.io/chiakilalala/pen/jOYpMRR) | |
| 35 | 第6組 / 馨云 | [codepen](https://codepen.io/bigheadyun/pen/mdpLMvz) | |
| 36 | 第8組 / Albert | [codepen](https://codepen.io/albert0810/pen/ExopXzM) | |
| 37 | 第 15 組 / Tofu | [codepen](https://codepen.io/Tofutseng/pen/xxpJGYP) |
| 38 | andyTsai | [codepen](https://codepen.io/AndyTsai/pen/QWaBxXy?editors=1011) |
| 39 | 第 1 組 / Claire | [codepen](https://codepen.io/claire-chang-the-bashful/pen/XWVBxNK) |
| 40 | 第 3 組 / Adam Hsu | [codepen](https://codepen.io/Adam-Hsu/pen/LYeBgam) |
| 41 | 第 7 組 / jason06286 | [codepen](https://codepen.io/jasonuse/pen/qBpyQZM?editors=0011) |
| 42 | 第 4 組 / Mischa | [codepen_mischa_day2](https://codepen.io/Dorothy_0528/pen/wvpxZMq?editors=0011) |
| 43 | 第 8 組 / 陳暐中 | [codepen](https://codepen.io/wei-z/pen/dyJjLdX?editors=0011) |
| 44 | 第 2 組 / wendy.li | [codepen](https://codepen.io/rockayumitw/pen/yLpEmow?editors=1111) |
| 45 | Cloud Su | [codepen](https://codepen.io/Cloud0905/pen/abEjxBg?editors=0012) |
| 46 | 第12組 Jimmy Chang | [codepen_Day2](https://codepen.io/JimmyChangWenChi/pen/MWrBRXx?editors=0012) |
| 47 | 第14組 涼二 | [codepen](https://codepen.io/Araytsai/pen/xxpaxdJ)|
| 48 | 第14組 Uniza | [codepen](https://codepen.io/zhan-hong-lin/pen/JjMajNa)|
| 49 | 第 1 組 / Ed Huang | [codepen](https://codepen.io/yide1986/pen/OJzoVXo?editors=0011)|
| 50 | 第 3 組 / Larry | [codepen](https://codepen.io/larrylinr5/pen/LYeJxNB?editors=1011) |
| 51 | 第 5 組 / Nap | [codepen](https://codepen.io/o0o0o1o0/pen/WNdgpQZ)
| 52 | 第 2 組 / Rikkubook | [codepen](https://codepen.io/rikkubook/pen/JjMaJEZ?editors=1011) |
| 53 | 第 1 組 / Phoebe | [codepen](https://codepen.io/phoebe26/pen/GRyXmvG) |
| 54 | 第 3 組 / Justin | [codepen](https://codepen.io/justin3737/pen/mdpGBZQ) |
|55|第13組/KFC|[codepen](https://codepen.io/kuan-fu-chen/pen/qBpMMdw?editors=1012)|
|56|第15組 / Chiu|[codepen](https://codepen.io/awdx8326/pen/JjMammJ?editors=0011)|
|57|第6組 / 謦麟|[codepen](https://codepen.io/pvzfeusk/pen/ZEvRVLN?editors=0011)|
|58|第5組 / 灰塵貓|[codepen](https://codepen.io/oqioqi/pen/ExodgbM?editors=1112)|
|59|第1組 / kimn|[codepen](https://codepen.io/kimn/pen/KKZBNaK)|
|60|第11組 /mandy|[codepen](https://codepen.io/manyu1225/pen/XWeNQbz?editors=1011)|
|61|第10組 /Otis|[codepen](https://codepen.io/humming74/pen/WNdYjmL?editors=0011)|
|62|第10組 / 橘子|[codepen](https://codepen.io/joanne-wei/pen/xxpmxKO)|
|63|第5組 / Hazel|[HackMD@Hazel](https://hackmd.io/@hazelwu/day2)|
| 64 | 第 1 組 / Emily Hsi | [codepen](https://codepen.io/EmilyHsi/pen/RwxEKax) |
| 65 | 第 12 組 / 傷腦經 | [codepen](https://codepen.io/souljazz/pen/zYpbEYp) |
| 66 | 第 8 組 / sam | [codepen](https://codepen.io/lee-wei-hong/pen/PoELyyz) |
| 67 | 第 5 組 / AmberCYT | [codepen](https://codepen.io/amberTing/pen/zYpQqrw?editors=1011) |
| 68 | 第 7 組 / TracyChien | [codepen](https://codepen.io/tracychien-the-encoder/pen/WNMeEYM?editors=0011) |
| 69 | 第 12 組 / Sylvia-H | [codepen](https://codepen.io/Cosmosheart/pen/rNJOpmM?editors=0011)
| 70 | 第 14 組 / 皮皮 | [codepen](https://codepen.io/super-shrimp/pen/MWQZQRe?editors=0012) |