# 🏅 Day 1 - 非同步概念、建立 Promise 在實作後端處理請求、存取資料庫並回傳資料、回應,需要等待結果,就會需要使用到非同步作法,而以往的非同步做法是使用 callback function 的寫法,這個寫法的問題是若是一層接著一層接連使用 callback 會造成難以閱讀、追蹤程式碼,Promise 語法是較新的非同步作法,會更容易閱讀一些 ### 建立 Promise Promise 是一個建構函式,代表一個即將完成或失敗的非同步操作,以及回傳的值 語法為: ```javascript= const promise = new Promise((resolve, reject) => { /* 執行一些非同步作業 const data = [...]; ... 最終呼叫: resolve(data); // 執行成功流程,傳遞取得的 data 資料 或 reject('Error'); // 執行失敗流程 */ }); ``` 其中兩個參數 resolve 及 reject 都是函式,分別代表成功與失敗的方法。 可自訂當非同步操作成功、完成時就會執行 resolve 函式;錯誤、拒絕時則執行 reject 函式。若是非同步操作執行時發生錯誤 Error,會執行 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」 題目 --- 以下為判斷房間評分的函式,請調整 `...` 的部分,完整以下 Promise 寫法。 當評分達 3 分以上時,執行成功流程並傳遞房間評分;未達 3 分,執行失敗流程並傳遞「未達評分標準」字串。 ```javascript= const checkRoomRating = new ...((resolve, reject) => { const roomRating = 4; if (roomRating >= 3) { resolve(roomRating); } else { reject('未達評分標準'); } }); ``` ## 回報流程 將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 解答位置請參考下圖(需打開程式碼的部分觀看) 回報區 --- <!-- 將答案貼至下方表格內,格式: | Discord 暱稱 | [CodePen](連結) | --> | Discord | CodePen / 答案 | |:--------------:|:----------------------------------------------------------------------------:| | xxx | [CodePen]() | | 2魚. | [CodePen](https://codepen.io/ijrekmsn-the-sans/pen/jORGBWJ) | | shuantt | [CodePen](https://codepen.io/th-tseng/pen/WNWXvob) | | Lobinda | [CodePen](https://codepen.io/Lobinda/pen/dyLZpEJ) | | Dawson | [CodePen](https://codepen.io/redawsonlin/pen/oNOpmgW?editors=0010) | | Ciel | [CodePen](https://codepen.io/nycteachen/pen/gOyoqwj) | | william威良 | [CodePen](https://codepen.io/snowman12320/pen/mdgpvqj?editors=1011) | | Richard_5107 | [CodePen](https://codepen.io/hywjltlg-the-typescripter/pen/poBpGGy) | | 群嘉 | [CodePen](https://codepen.io/efzdamnp-the-lessful/pen/mdgpvva?editors=0011) | | kelvinnn | [CodePen](https://codepen.io/is-lin/pen/gOyoZyv?editors=1011) | | cbs | [Codepen](https://codepen.io/wasdjk/pen/MWRrxWJ) | | cho | [CodePen](https://codepen.io/cho195/pen/jORYdeP) | | Tippy | [CodePen](https://codepen.io/Ektodor-Wang/pen/NWmXVNo) | | Chia Pin | [CodePen](https://codepen.io/joker-cat/pen/PogEvmy) | | redner_lai | [CodePen](https://codepen.io/hsinhui/pen/QWPaXOd?editors=0011) | | Theodore | [CodePen](https://codepen.io/GustavoFringgg/pen/gOyvYpe) | | wei | [CodePen](https://codepen.io/Wei-the-sasster/pen/jORGmwM) | | zaoannihao | [CodePen](https://codepen.io/ckhwdvrx-the-solid/pen/RwOQwLz) | | Tiya | [CodePen](https://codepen.io/Tiya_blank/pen/abxEedx) | | ChrisT | [CodePen](https://codepen.io/r37111081/pen/VwNQWvG) | | 寬寬 | [CodePen](https://codepen.io/ks960037/pen/dyLdRVw) | | 風清羊 | [CodePen](https://codepen.io/bryanlincode/pen/mdgXwNJ) | | AL | [CodePen](https://codepen.io/allisonlai/pen/oNOEoea) | | Johlmike | [CodePen](https://codepen.io/johlmike/pen/qBwxxWZ) | | yiling4054 | [CodePen](https://codepen.io/lin010/pen/vYMdbvj?editors=1011) | | Alan | [CodePen](https://codepen.io/l0f0/pen/YzMeowO?editors=1111) | | tung030374 | [CodePen](https://codepen.io/tung__u/pen/zYXWOOO) | | Jean | [CodePen](https://codepen.io/jeanchiang1221/pen/GRLxMPG) | | ellallu0903 | [CodePen](https://codepen.io/ellallu0903/pen/KKYoyPK) | | 羽 | [CodePen](https://codepen.io/lingling-Syu/pen/RwOMjwJ?editors=1111) | | YC | [CodePen](https://codepen.io/YCLu/pen/XWQEzKp) | | Otis | [CodePen](https://codepen.io/humming74/pen/ExJEbGE?editors=1011) | | Ingridkao | [CodePen](https://codepen.io/ingrid_kao/pen/rNbdpad) | | 阿旭 | [CodePen](https://codepen.io/koei-lu/pen/YzMaeZZ?editors=1111) | | Aida | [CodePen](https://codepen.io/ada23410/pen/RwOMQEQ?editors=1111) | | 瑀君 | [CodePen](https://codepen.io/yennnnn/pen/YzMavpN?editors=1111) | | william_hsu | [CodePen](https://codepen.io/william8815/pen/jORzprO) | | ej_chuang | [CodePen](https://codepen.io/EJChuang/pen/bGJvjWX) | | wendylinlin | [CodePen](https://codepen.io/wendyseal/pen/YzMaRJd) | | YJ | [CodePen](https://codepen.io/y0000ga/pen/JjVLxpK) | | 苡安 | [CodePen](https://codepen.io/yi-an-yang/pen/qBwYBrV?editors=1111) | | 麥麥口 | [CodePen](https://codepen.io/ChunHsinTung/pen/eYorNEw?editors=1111) | | albertyang3576 | [CodePen](https://codepen.io/albertyang3576/pen/oNOdbdr) | | blp100x | [CodePen](https://codepen.io/blp100/pen/PogepGw) | | felixfufu | [CodePen](https://codepen.io/fufushih/pen/xxejpEJ) | | Hank | [CodePen](https://codepen.io/tw1720/pen/BaExryq) | | 圈圈 | [Codepen](https://codepen.io/wjejfczn-the-bold/pen/PogwGGw) | | Fabio20 | [Codepen](https://codepen.io/fabio7621/pen/qBwKEEY) | | runweiting | [Codepen](https://codepen.io/weiting14/pen/YzMvvoN) | | Thomas | [Codepen](https://codepen.io/ThomasYeh/pen/MWRXPXz) | | Sophiee | [Codepen](https://codepen.io/r37111081/pen/VwNQWvG) | | Mei | [Codepen](https://codepen.io/l_umei/pen/JjVBRqm) | | jenny7532 | [Codepen](https://codepen.io/wei-chen-wu/pen/GRLBQwN?editors=1111) | | Esther | [Codepen](https://codepen.io/xueefddg-the-sans/pen/VwNBXYj) | | Henry | [Codepen](https://codepen.io/hekman1122/pen/ZEZjMEQ?editors=0012) | | yoshidc | [CodePen](https://codepen.io/yoshiyyc/pen/jORpjdR) | | Benson | [CodePen](https://codepen.io/nosneb83/pen/KKYxape) | | aprilccc | [CodePen](https://codepen.io/vocalise_com/pen/WNWgpgb) | | jules | [CodePen](https://codepen.io/cjntfsoq-the-animator/pen/poBOpEo?editors=1111) | | Ching | [CodePen](https://codepen.io/huangching/pen/OJGajer)|