# 🏅Day30 - 介紹 async/await 與 Promise 之間的觀念

### Promise
Promise 是一個函式建構子，可以透過 new Promise() 的方式建立，建立出的 Promise 物件代表一個非同步操作，這個操作會包含以下的狀態
- 執行中（pending）
- 執行完成、成功（fulfilled）
- 執行完成、失敗（rejected）

如：

const myPromise = new Promise((resolve, reject) => {
  // 執行一些非同步作業
  setTimeout(function () {
    resolve("Success!"); // 操作成功，回傳值為 "Success!"
  }, 0);
    
  if(false) {
    reject("failure reason"); // 拒絕，回傳錯誤提示
  }
  
});

### async/await 與 Promise

async function 代表非同步的 function，會回傳一個 Promise，當 Promise 狀態為操作成功，async function 會回傳 resolve() 的值，若 Promise 狀態為操作失敗，async function 則會拋出錯誤，並出現 reject() 的錯誤訊息。

await 是一個運算子，可用於等待 Promise 結果，且只能在 async function 內使用。
當 async function 內使用 await，會等待 Promise 非同步操作結束，才會接續執行 await 以後的程式。
例如：

function promiseFn() {
  return new Promise((resolve, reject) => {
  // 執行一些非同步作業
  setTimeout(function () {
    resolve("Success!"); // 操作成功，回傳值為 "Success!"
  }, 0);

  if(false) {
    reject("failure reason"); // 拒絕，回傳錯誤提示
  }
  });
}
async function getResult() {
 const result = await promiseFn();
 // 接收到 promiseFn() 結果後才會接續後面的程式
 ...
}
getResult();

async/await 的寫法可以讓非同步的執行過程，在瀏覽程式碼時像是同步的流程（實際上仍是非同步操作）。
## 題目
請複製 （右下角 fork）這個[範例](https://codepen.io/yen-kg/pen/XWvOaav?editors=1010)，使用 async/await 寫法取得呼叫 API 的結果 https://dog.ceo/api/breeds/image/random ，並在 console 印出 圖片 URL。

<!-- 解答：

async function fetchAPI() {
  const response = await fetch('https://dog.ceo/api/breeds/image/random');
  const responseJson = await response.json();
  console.log(responseJson.message);
}
fetchAPI()

-->

| Name | Codepen |
| -------- | -------- |
| Mikka | [codepen](https://codepen.io/Miikaa/pen/emzBLZP) |
| 7lun | [codepen](https://codepen.io/mfyvqhsn-the-bold/pen/qENmyZR?editors=1011) |
|cks40660 | [codepen](https://codepen.io/CKS40660/pen/YPWxqKb)|
| andy | [codepen](https://codepen.io/ewnblckz-the-styleful/pen/VYjzavO?editors=0011) |
| 地瓜 | [codepen](https://codepen.io/ChippyYU/pen/myEMPed?editors=1011) |
| Melanie | [codepen](https://codepen.io/pnrcspte-the-animator/pen/jErLWgy) |
| Nooooora | [CodePen](https://codepen.io/Nora-Ch/pen/bNerpeB?editors=1111)|
| Tetsu | [Codepen](https://codepen.io/ttgchang/pen/qENXZOL)|
| Marco | [Codepen](https://codepen.io/MarcoChiu/pen/ByzdKQz)|
| 社子畢卡索 | [Codepen](https://codepen.io/pen?template=ogLexWr)|
| RUDY | [Codepen](https://codepen.io/Rudy-crw/pen/pvbryjr?editors=0012)|
| 老屠 | [Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/pvbryGK?editors=0011)|
| Chia |[Codepen](https://codepen.io/Chia-the-encoder/pen/QwEMNom)|
|ZoeKang|[Codepen](https://codepen.io/byehywmx-the-animator/pen/NPrvrEo)|
|平平|[Codepen](https://codepen.io/ypinpin/pen/OPXjRGP)|
| Jin |[Codepen](https://codepen.io/Jin-L/pen/dPXzOGL)|
| 舜仁 |[Codepen](https://codepen.io/shunjen/pen/NPrvbaj)|
|小趴|[Codepen](https://codepen.io/papa2415/pen/qENXqye)|
| 叮咚 |[Codepen](https://codepen.io/pinchieh-lin/pen/JoKyEbY)|
| Eileen |[Codepen](https://codepen.io/Eileen-io/pen/RNRZoXo)|
| 小懿 |[Codepen](https://codepen.io/YT-the-vuer/pen/yyJogaZ?editors=0011)|
| KOMATSU PEI |[Codepen](https://codepen.io/Komatsu2021/pen/VYjzeJR?editors=1010)|
| Percy |[Codepen](https://codepen.io/Percy-Ku/pen/MYeojpJ)|
| Leonard |[Codepen](https://codepen.io/hyyfjqra-the-sans/pen/RNRZVVN)|
| wind |[Codepen](https://codepen.io/wind7y/pen/zxBdEye)|
| kashiwatei |[Codepen](https://codepen.io/kashiwatei/pen/azZyEGV?editors=1011)|
| Jenna |[Codepen](https://codepen.io/abiscc14/pen/PwzKyxb)|
| 7Red | [Codepen](https://codepen.io/cch2655/pen/jErLXKb) |
| Eric | [Codepen](https://codepen.io/wc-su/pen/wBWqNMM) |
| Wafa | [Codepen](https://codepen.io/dqricwgo-the-reactor/pen/raLYaEj?editors=1111) |
| Rogan | [Codepen](https://codepen.io/RoganHsu/pen/VYjryYP?editors=1011) |
| 星雪糖 | [Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/ogLpjMN?editors=1011) |
|TWLeoC|[Codepan](https://codepen.io/TWLeoC/pen/raLpzZa?editors=1011)|
|JiaMori|[Codepan](https://codepen.io/jiamori/pen/emzyeGK?editors=1111)|
|Wen|[Codepen](https://codepen.io/hsiao-kevin/pen/ogLyEzg?editors=1011)|