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

## 非同步概念、建立 Promise

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

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

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 語法改寫

const checkScore = (score) => {
  /* 回傳一個 Promise，並執行以下非同步操作*/
  const score = Math.round(Math.random() * 100);
  /* 判斷流程請嘗試使用 setTimeout() 執行 */
  if(score >= 60) {
    console.log(score); // 執行實現方法
  } else {
    console.log("不及格"); // 執行拒絕方法
  }
}

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


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


<!-- 解答
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) |