---
# System prepended metadata

title: "\U0001F3C5 Day 1"
tags: [Node.js 直播班 - 2022 春季班]

---

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



## 非同步概念、建立 Promise



### 前言
因接下來在實作後端處理請求、存取資料庫並回傳資料、回應，需要等待結果，就會需要使用到非同步作法，而以往的非同步做法是使用 callback function 的寫法，這個寫法的問題是若是一層接著一層接連使用 callback 會造成難以閱讀、追蹤程式碼，Promise 語法是較新的非同步作法，會更容易閱讀一些

### 建立 Promise 簡介
Promise 是一個物件，代表一個即將完成或失敗的非同步操作，以及回傳的值
語法為：
```javascript
new Promise((resolve, reject) => {
  // 執行一些非同步作業，最終呼叫:
  //
  // resolve(someValue); // 實現
  // 或
  // reject("failure reason"); // 拒絕
} );
```
其中兩個參數 resolve 及 reject 都是函式，分別代表實現（完成）及拒絕的函式，當非同步操作成功完成時就會執行 resolve 函式完成 promise，錯誤、失敗則執行 reject 函式，若是`(resolve, reject) => { ... }` 函式執行時出錯，promise 會被拒絕，執行 reject 函式時會回傳 error 物件或失敗訊息

### 參考資源
[非同步的 JavaScript 介紹 - 學習該如何開發 Web | MDN](https://developer.mozilla.org/zh-TW/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 語法改寫
```JavaScript
const checkScore = (score) => {
  /* 回傳一個 Promise，並執行以下非同步操作*/
  const score = Math.round(Math.random() * 100);
  /* 判斷流程請嘗試使用 setTimeout() 執行 */
  if(score >= 60) {
    console.log(score); // 執行實現方法
  } else {
    console.log("不及格"); // 執行拒絕方法
  }
}
```

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

![](https://i.imgur.com/QtL8zEW.png)

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

![](https://i.imgur.com/L7kyew8.png)

<!-- 解答
const checkScore = (score) => {
  return new Promise((resolve, reject) => {
   const score = Math.round(Math.random() * 100);
   setTimeout(() => {
    if (score >= 60) {
      resolve(score); // 執行實現方法
    } else {
      reject("不及格"); // 執行拒絕方法
    }
  } )
};

-->

回報區
---

| 報數 |       組別 / 名字       |                            codepen / 其他回饋                             |
|:----:|:-----------------------:|:-------------------------------------------------------------------------:|
|  1   |         hsin yu         |          https://codepen.io/tina2793778/pen/VwyzQjW?editors=0010          |
|  2   |     第 3 組 / Larry     |          https://codepen.io/larrylinr5/pen/YzYLPGE?editors=1011           |
|  3   |     第 6 組 / Wendy     |                  https://codepen.io/wendy03/pen/rNpvayx                   |
|  4   |         第 2 組 / Jin           |             https://codepen.io/Jin-L/pen/qBpYEjj?editors=0010             |
|  5   |         2 / Vic         |      [codepen](https://codepen.io/hsuan333/pen/zYpjxEK?editors=1012)      |
|  6   |         黃士桓          |        https://codepen.io/shr-huan-huang/pen/qBpYEPj?editors=0011         |
|  7   |        12 / Kun         |            https://codepen.io/Kun-Liu/pen/KKZRpyW?editors=0010            |
|  8   |     9  /  konstante     |               https://codepen.io/konstantechang/pen/rNpvVzp               |
|  9   |     第 6 組 / Ruta      |            https://codepen.io/rue503/pen/rNpvaYL?editors=0011             |
|  10  |   第 11 組 / Han Lai    |                   https://codepen.io/x94han/pen/QWarbpK                   |
|  11  |     第 1 組 / kimn      |             https://codepen.io/kimn/pen/gOozpjp?editors=0011              |
|  12  |     第 2 組 / Genos     |                  https://codepen.io/pb220416/pen/vYpmaWE                  |
|  13  |    第 8 組 / JackLee    |           https://codepen.io/yxzzktmb/pen/xxpjwwN?editors=0012            |
|  14  |  第 8 組 / Hank   |                 https://codepen.io/hank-hsiao/pen/eYyrpBQ                 |
|  15  |     第 2 組 / Arisa     |                 https://codepen.io/YANGYICHEN/pen/JjMvdKZ                 |
|  16  |     第5組 / sihyun      |            https://codepen.io/siyuch/pen/zYpjvYy?editors=1111             |
|  17  |           Aya           |                 https://codepen.io/NoNameNote/pen/BaJxjaV                 |
|  18  |         第 15 組 / Cadiis          |                 https://codepen.io/dronzefeng/pen/ExoLVMa                 |
|  19  |   第 3 組 / Adam Hsu    |            [codepen](https://codepen.io/Adam-Hsu/pen/JjMvGar)             |
|  20  |     第 14 組  East      |                   https://codepen.io/EastM/pen/mdpLVqK                    |
|  21  |     第 1 組  Phoebe     |                  https://codepen.io/phoebe26/pen/VwyxaWg                  |
|  22  |    第 7 組 / JimmyWu    |                  https://codepen.io/Jimmy_Wu/pen/ExoLKbL                  |
| 23.  |    第 3 組 / Justin     |          https://codepen.io/justin3737/pen/dyJeXQp?editors=0011           |
|  24  |   第 3 組 /  hiYifang   |                  https://codepen.io/hiYifang/pen/GRydjJQ                  |
|  25  |    第 9 組 / Reynold    |     [codepen](https://codepen.io/chasel1020/pen/WNdJodG?editors=0011)     |
|  26  |  第 2 組 / Leo Chuang   | [codepen](https://codepen.io/benjaminchinchuang/pen/oNpdzQE?editors=0011) |
|  27  |    第 14 組 / uniza     |      [codepen](https://codepen.io/unizalin/pen/YzYLpEM?editors=1011)      |
|  28  |     第 4 組 / 小宥      |                 https://codepen.io/yosontw21/pen/vYpjxBZ                  |
|  29  | 第 10 組 / 真．穎旻粉撕 |      [codepen](https://codepen.io/gbnbihif/pen/PoEepmB?editors=0011)      |
|  30  |    第 5 組 / 灰塵貓     |        [codepen](https://codepen.io/ohla/pen/jOYxBwj?editors=1011)        |
|  31  |          洧杰           |        [codepen](https://codepen.io/ohla/pen/jOYxBwj?editors=1011)        |
|  32  |   第 2 組 / joe.chang   |      [codepen](https://codepen.io/t7552175/pen/oNpdZJE?editors=1012)      |
|  33  |     第 5 組 / zion      |      [codepen](https://codepen.io/Loooong/pen/mdpLmRY?editors=1012)       |
|  34  |     第 15 組 / Chiu     |      [codepen](https://codepen.io/awdx8326/pen/PoEemZr?editors=1112)      |
|  35  |     第 4 組 / Yiren     |           [codepen](https://codepen.io/Yiren_Liou/pen/yLpjMdO)            |
|  36  |    第 1 組 / Claire     |    [codepen](https://codepen.io/claire-chang-the-bashful/pen/NWXMjGP)     |
|  37  |   第 2 組 / wendy.li    |    [codepen](https://codepen.io/rockayumitw/pen/vYpjJrj?editors=0012)     |
|  38  |       第13組/KFC        |          [codepen](https://codepen.io/kuan-fu-chen/pen/abEGWoL)           |
|  39  |     第 6 組 / 馨云      |     [codepen](https://codepen.io/bigheadyun/pen/RwxyZvY?editors=1111)     |
|  40  |     第 4 組 / 苡安      |           [codepen](https://codepen.io/yi-an-yang/pen/PoEeKOd)            |
|  41  |           kk            |     [codepen](https://codepen.io/potatokaka/pen/YzYLxae?editors=0011)     |
|  42  |   第 2 組 / Rikkubook   |     [codepen](https://codepen.io/rikkubook/pen/yLpjzXM?editors=1111)      |
|  43  |     第 7 組 / 程翔      |      [codepen](https://codepen.io/xxxiang/pen/oNpdGdm?editors=0010)       |
|  44  |   第 1 組 / Emily Hsi   |            [codepen](https://codepen.io/EmilyHsi/pen/zYpjEMa)             |
|  45  |     第 1 組 / 冰呆      |    [codepen](https://codepen.io/weiweiweill/pen/vYpjeVo?editors=0012)     |
|  46  |      第 5 組 / Nap      |            [codepen](https://codepen.io/o0o0o1o0/pen/gOozmZZ)             |
|  47  |          Naiky          |              [codepen](https://codepen.io/naiky/pen/yLpjPyv)              |
|  48  |      第 1 組 / Pon      |      [codepen](https://codepen.io/Pon-Wang/pen/yLpjpJd?editors=0012)      |
|  49  |     第 3 組 / 小葉      |            [codepen](https://codepen.io/Yu__hung/pen/vYpjJWd)             |
|  50  |      第 8 組 / sam      |          [codepen](https://codepen.io/lee-wei-hong/pen/KKZRZOd)          |
|  52  |    第 15 組 / yolala    |          [codepen](https://codepen.io/chiakilalala/pen/YzYLJeg)           |
|  53  |    第 15 組 / Tofu      |  [codepen](https://codepen.io/Tofutseng/pen/oNpdayJ)                                                                                  |
|  54  |    第 12 組 / JimmyChang      |  [codepen_Promise](https://codepen.io/JimmyChangWenChi/pen/XWVqOjg?editors=1012)
|  55  |    第 3 組 / HedgehogKU      | [codepen](https://codepen.io/hedgehogkucc/pen/yLpjZbV?editors=0011) |
|  56  |    第 8 組 / 陳暐中   |https://codepen.io/wei-z/pen/JjMvxwm?editors=1012 |
|  57  |    第 4 組 / sihle   | https://codepen.io/bugbug777/pen/RwxJbaq |
|  58  |    第 4 組 / mischa   | [codepen_mischa_day1](https://codepen.io/Dorothy_0528/pen/XWVqyBQ?editors=0011) |
|  59  |    第 11 組 / JamieLee   | [codepen](https://codepen.io/jamieleegit/pen/eYyKmvO?editors=0011) |
|  60  |    第 15 組 / Castiel   | [codepen](https://codepen.io/everydaycodedog/pen/ExoRKam?editors=0012) |
|  61  |    第 5 組 / AmberCYT   | [codepen](https://codepen.io/amberTing/pen/eYyrdQd?editors=1011) |
|  62  |    海底藍   | [codepen](https://codepen.io/registermar3/pen/NWXzvOo?editors=0011) |
|  63  |    第 14 組 / 涼二  | [codepen](https://codepen.io/Araytsai/pen/wvpXeGz) |
|  64  |    第 1 組 / Jerry Huang  | [codepen](https://codepen.io/sun31483/pen/NWXzXvO?editors=1010) |
|  65  |    Cloud_Su  | [codepen](https://codepen.io/Cloud0905/pen/ZEvRrBp) |
|  66  |    第 10 組 / 橘子  | [codepen](https://codepen.io/joanne-wei/pen/JjMZpVa) |
|  67  |    第 14 組 / ChloeLo  | [codepen](https://codepen.io/chloelo/pen/ExoRERM) |
|  68  |    第 6 組 / 謦麟  | [codepen](https://codepen.io/pvzfeusk/pen/ZEvRVLN?editors=0011) |
|  69  |    第 8 組 / Siling  | [codepen](https://codepen.io/thinksea/pen/PoEaVpL?editors=0012) |
|  70  |    第 2 組 / peter.chen1024  | [codepen](https://codepen.io/JIAN-RONG/pen/abEKxpz?editors=0012) |
|  71  |    第 10 組 / Butters  | [codepen](https://codepen.io/Butterscode/pen/OJzEYbq) |
|  72  |    第 3 組 / Hobby  | [codepen](https://codepen.io/hobbyling/pen/YzYvbMB) |
|  73  |    第 8 組 / Jordan Tseng  | [codepen](https://codepen.io/jordan-ttc-design/pen/rNprBMM?editors=1011) |
|  74  |    nick6303   |  [codepen](https://codepen.io/nick6303/pen/jOYpPGP?editors=1111) |
|  75  |    第 16 組 / 皓皓   |  [codepen](https://codepen.io/cutecat8110/pen/JjMBKGa) |
|  76  |    第 8 組 / Albert   |  [codepen](https://codepen.io/albert0810/pen/rNprmEz) |
|  77  |    第 7 組 / jason06286   |  [codepen](https://codepen.io/jasonuse/pen/qBpyQZM?editors=0011) |
|  78  |    第 11 組 / mandy   |  [codepen](https://codepen.io/manyu1225/pen/ExvzpJr?editors=1011) |
|  79  |    第 1 組 / Ed Huang   |  [codepen](https://codepen.io/yide1986/pen/OJzoPrQ?editors=0010) |
|  80  |    第 16 組 / Blake Hung   |  [codepen](https://codepen.io/Blakehong/pen/NWXOwvP?editors=0010) |
|  81  |    第 5 組 / Hazel Wu   |  [codepen@Hazel](https://codepen.io/wualnz/pen/popxVrp?editors=0011) |
|  82  |    第 10 組 / Otis   |  [codepen](https://codepen.io/humming74/pen/LYeXyXb?editors=0011) |
|  84  |    第 12 組 / 傷腦經   |  [codepen](https://codepen.io/souljazz/pen/mdpoBbY?editors=0010) |
|  85  |    第 7 組 / TracyChien   |  [codepen](https://codepen.io/tracychien-the-encoder/pen/VwQZWPB?editors=0011) |
|  86  |    第 12 組 / Sylvia-H   |  [codepen](https://codepen.io/Cosmosheart/pen/BaYomrr?editors=0011) |
|  87  |    第 14 組 / 皮皮   |  [codepen](https://codepen.io/super-shrimp/pen/GRQPQOB) |