# 🏅 Day 2 - Promise 運用
建立好 Promise 後，就可以在完成 Promise 時使用 `.then()` 接收回傳的 Promise 物件，以及使用 `.catch()` 接收錯誤，因 Promise 可以用鏈式寫法接收回傳值，不需像使用 callback function 一層包一層，因此可以提昇易讀性

- `.then()`：接收 resolve 傳遞的資料
- `.catch()`：接收 reject 傳遞的資料

以前一天解答為例：

const checkRoomRating = new Promise((resolve, reject) => {
  const roomRating = 4;
  if (roomRating >= 3) {
    resolve(roomRating);  
  } else {
    reject('未達評分標準');
  }
});

// 呼叫 checkRoomRating，使用 .then .catch 接收回傳值，並執行後續操作
checkRoomRating
  .then((data) => {
    console.log(data);  // 印出 roomRating 的值
  })
  .catch((error) => {
    console.log(error); // 印出 '未達評分標準' 
  })

### 帶入參數
要讓函式可以帶入參數，可以調整成如下寫法（改寫上方範例），回傳整個 Promise 物件

const checkRoomRating = roomRating => {
  return new Promise((resolve, reject) => {
    // const roomRating = 4; 改為使用參數帶入
    if (roomRating >= 3) {
      resolve(roomRating);  
    } else {
      reject('未達評分標準');
    }
  });
};

checkRoomRating(4)
  .then((data) => {
    console.log(data);  // 印出 roomRating 的值
  })
  .catch((error) => {
    console.log(error); // 印出 '未達評分標準' 
  })

### 參考資源
- [Using Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises)
- [JavaScript Promise 全介紹 | 卡斯伯 Blog - 前端，沒有極限](https://www.casper.tw/development/2020/02/16/all-new-promise/)
- 課程影音「Node.js 非同步技巧 - Promise、Async、Await」

題目
---
以下 `historyOrdersData` 資料為某飯店的訂房紀錄，
請調整 `...` 的部分，完整程式碼，讓程式碼符合以下流程：
- 運用 `getUserData(使用者名稱)` 取得使用者訂房紀錄，若未訂過會印出 `該使用者無訂房紀錄`；若有訂房過會計算該使用者的累計訂房金額，並傳遞使用者資料 `（使用者名稱、訂房次數、累計訂房金額）`
- 接續使用 `checkVip(傳遞的資料)` 確認是否達到升級 VIP 資格（累計訂房金額達 10000 元）
- 符合資格：印出 `累計訂房金額： ... 元，已達升級 VIP 會員資格`
- 不符合資格：印出 `還差 ... 元，才可升級 VIP 會員`

const historyOrdersData = [{
  room: '豪華雙人房',
  price: 3200,
  user: 'Tom'
},{
  room: '高級雙人房',
  price: 2800,
  user: 'Tom'
},{
  room: '高級雙人房',
  price: 2800,
  user: 'Tommy'
}];

const getUserData = (name) => {
  return new Promise((resolve, reject) => {
    const data = {
      user: ...,      // 使用者名稱
      orderSum: 0,    // 累計訂房金額
      orderTimes: 0,  // 訂房次數
    };
      
    // 計算累計訂房金額
    historyOrdersData.forEach((item) => {
      if (item.user === ...) {
        data.orderSum += ...;
        data.orderTimes += 1;
      }
    });
    
    // 確認是否有訂房紀錄
    if (data....) {
      resolve(...);
    } else {
      reject('...');
    }
  })
};

const checkVip = (data) => {
  return new Promise((resolve, reject) => {
    if (data.orderSum >= ...) {
      resolve(`累計訂房金額： ${...} 元，已達升級 VIP 會員資格`);
    } else {
      const price = 10000 - ...;
      reject(`還差 ${price} 元，才可升級 VIP 會員`);
    }
  });
};

getUserData('Tom')
  ....(data => ...)
  ....(isVipStr => console.log(isVipStr))
  ....(error => console.log(error))

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：

const historyOrdersData = [{
  room: '豪華雙人房',
  price: 3200,
  user: 'Tom'
},{
  room: '高級雙人房',
  price: 2800,
  user: 'Tom'
},{
  room: '高級雙人房',
  price: 2800,
  user: 'Tommy'
}];

const getUserData = (name) => {
  return new Promise((resolve, reject) => {
    const data = {
      user: name,
      orderSum: 0,
      orderTimes: 0,
    };
    historyOrdersData.forEach((item) => {
      if (item.user === name) {
        data.orderSum += item.price;
        data.orderTimes += 1;
      }
    });
    if (data.orderTimes) {
      resolve(data);
    } else {
      reject('該使用者無訂房紀錄');
    }
  })
};

const checkVip = (data) => {
  return new Promise((resolve, reject) => {
    if (data.orderSum >= 10000) {
      resolve(`累計訂房金額： ${data.orderSum} 元，已達升級 VIP 會員資格`);
    } else {
      const price = 10000 - data.orderSum;
      reject(`還差 ${price} 元，才可升級 VIP 會員`);
    }
  });
};

getUserData('Tom')
  .then(data => checkVip(data))
  .then(isVipStr => console.log(isVipStr))
  .catch(error => console.log(error))

-->

回報區
---
<!--
將答案貼至下方表格內，格式：
| Discord 暱稱 | [CodePen](連結) |
-->

| Discord | CodePen ／ 答案 |
|:-------------:|:-----------------:|
| xxx | [CodePen]() |
| 2魚. | [CodePen](https://codepen.io/ijrekmsn-the-sans/pen/poBdeRY) |
|Lobinda | [CodePen](https://codepen.io/Lobinda/pen/WNWXMjN) |
|Tiya | [CodePen](https://codepen.io/Tiya_blank/pen/YzMeQwR) |
| william威良 | [CodePen](https://codepen.io/snowman12320/pen/jORZwwM) |
| 寬寬 | [CodePen](https://codepen.io/ks960037/pen/PogQjVZ) |
| ChrisT | [CodePen](https://codepen.io/r37111081/pen/QWPQgKy) |
| Chia Pin | [CodePen](https://codepen.io/joker-cat/pen/jORZLVZ) |
render_lai | [CodePen](https://codepen.io/hsinhui/pen/RwOQZOV)
| cbs |[Codepen](https://codepen.io/wasdjk/pen/poBaWLo?editors=1111)|
| AL |[Codepen](https://codepen.io/allisonlai/pen/eYoVePV)|
| Johlmike |[Codepen](https://codepen.io/johlmike/pen/rNbJJmV)|
| kelvinnn |[Codepen](https://codepen.io/is-lin/pen/ZEZrxmv)|
|群嘉|[CodePen](https://codepen.io/efzdamnp-the-lessful/pen/WNWMJbO?editors=0012)|
| zaoannihao | [CodePen](https://codepen.io/ckhwdvrx-the-solid/pen/dyLdeNy) |
| shuantt | [CodePen](https://codepen.io/th-tseng/pen/wvZyjrq)|
| Theodore | [CodePen](https://codepen.io/GustavoFringgg/pen/wvZyXJY?editors=1011) |
| yiling4054 | [CodePen](https://codepen.io/lin010/pen/qBwxGBb?editors=1011) |
| Alan | [CodePen](https://codepen.io/l0f0/pen/eYoVwrG?editors=1111) |
| tung030374 | [CodePen](https://codepen.io/tung__u/pen/abxqeYr?editors=0012) |
| wei | [CodePen](https://codepen.io/Wei-the-sasster/pen/qBwoRjo?editors=0011)|
|cho|[CodePen](https://codepen.io/cho195/pen/VwNXPBq)|
|ellallu0903|[CodePen](https://codepen.io/ellallu0903/pen/dyLmZGm)|
|風清羊|[Codepen](https://codepen.io/bryanlincode/pen/RwOMjRY)|
| YC | [CodePen](https://codepen.io/YCLu/pen/XWQEzKp)|
| 羽 | [CodePen](https://codepen.io/lingling-Syu/pen/NWmYwjW?editors=0011)|
| RayRay | [CodePen](https://codepen.io/CityRay/pen/oNOqoVQ)|
| Jean | [CodePen](https://codepen.io/jeanchiang1221/pen/rNbdYLW)|
| Ingridkao | [CodePen](https://codepen.io/ingrid_kao/pen/ZEZxvGv?editors=1011)|
| Otis | [CodePen](https://codepen.io/humming74/pen/rNbdpMK?editors=1111)|
| Aida | [CodePen](https://codepen.io/ada23410/pen/GRLxQPd?editors=0011)|
| 阿旭 | [CodePen](https://codepen.io/1997-work/pen/eYoMrmy?editors=1011)|
| 瑀君 | [CodePen](https://codepen.io/yennnnn/pen/VwNXdbP?editors=1112)|
| william_hsu | [CodePen](https://codepen.io/william8815/pen/BaErPWe)|
| ej_chuang | [CodePen](https://codepen.io/EJChuang/pen/OJGvwQe)|
| YJ | [CodePen](https://codepen.io/y0000ga/pen/eYoMxLY)|
| 苡安 | [CodePen](https://codepen.io/yi-an-yang/pen/QWPrWMW?editors=1112)|
| Ciel | [CodePen](https://codepen.io/nycteachen/pen/VwNxjYr)|
| blp100x | [CodePen](https://codepen.io/blp100/pen/WNWJpOR)|
| Tippy | [CodePen](https://codepen.io/Ektodor-Wang/pen/rNbvpdK)|
| 圈圈 | [CodePen](https://codepen.io/wjejfczn-the-bold/pen/zYXjLbd) |
| Hank | [CodePen](https://codepen.io/tw1720/pen/bGJMjXN)|
| Fabio20 | [CodePen]([連結](https://codepen.io/fabio7621/pen/XWQYJRV?editors=0010)) |
| runweiting | [CodePen](https://codepen.io/weiting14/pen/ExJRpKV) |
| Thomas | [CodePen](https://codepen.io/ThomasYeh/pen/oNOyaKL) |
| Sophiee | [CodePen](https://codepen.io/sophiee2727/pen/zYXabEr) |
|Mei| [Codepen](https://codepen.io/l_umei/pen/VwNBbrY)|
|Esther| [Codepen](https://codepen.io/xueefddg-the-sans/pen/PogBRPJ)|
|jenny7532| [Codepen](https://codepen.io/wei-chen-wu/pen/WNWKKaP?editors=1111)|
| Henry | [Codepen](https://codepen.io/hekman1122/pen/mdgjGxo?editors=0012) |
| yoshidc | [CodePen](https://codepen.io/yoshiyyc/pen/mdgjNVj) |
| Benson | [CodePen](https://codepen.io/nosneb83/pen/LYvJxNV) |
| aprilccc | [CodePen](https://codepen.io/vocalise_com/pen/MWRqoYq) |
| jules | [CodePen](https://codepen.io/cjntfsoq-the-animator/pen/OJGozzq?editors=1111) |
| Ching | [CodePen](https://codepen.io/huangching/pen/rNbQGoY) |
| albertyang3576 | [CodePen](https://codepen.io/albertyang3576/pen/KKYENOK) |
| SKey | [CodePen](https://codepen.io/Dale-Chien/pen/BaeaLQx) |
| 柚子 | [CodePen](https://codepen.io/joker-cat/pen/jORZLVZ?editors=1112) |
| 郭芙蘭 | [CodePen](https://codepen.io/flora_Kuo/pen/QWRwjZO?editors=0012) |
|puffy_chen|[CodePen](https://codepen.io/TernMayDay/pen/ExzVdoV?editors=1111)