---
# System prepended metadata

title: "\U0001F3C5 Day 11 ｜async / await 與 Promise"
tags: [2023 React 入門攻略工作坊]

---

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

如：
```js
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 以後的程式。
例如：
```js
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/hexschool/pen/OJaryRw?editors=0010)，使用 async/await 寫法取得呼叫 API 的結果 https://dog.ceo/api/breeds/image/random ，並在 console 印出 圖片 URL。



## 回報流程
將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）
![](https://i.imgur.com/vftL5i0.png)

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

```
-->


回報區
---


|  #  | Discord  | CodePen / 答案                                         |
|:---:|:-------- |:------------------------------------------------------ |
| 1 | 翔.(Ben) | [Codepen](https://codepen.io/energy95272z/pen/mdayPKW?editors=0011) |
| 2 | Billy.Ji | [Codepen](https://codepen.io/yaj55ushydna/pen/OJrPNrz) |
| 3 | Jie016 | [Codepen](https://codepen.io/Jie-Kuo/pen/xxmbVvZ) |
| 4 | stevenchang421 | [Codepen](https://codepen.io/vwtrpqmm/pen/abPzZzd) |
| 5 | Wendy3 | [Codepen](https://codepen.io/wendy03/pen/mdayEEp) |
| 6 | yuchih | [Codepen](https://codepen.io/hijachu/pen/MWZYeeN?editors=0012) |
| 7 | 羅羅 | [Codepen](https://codepen.io/bjqs02/pen/xxmbObV) |
| 8 | shcopy | [Codepen](https://codepen.io/shcopy/pen/bGONeYz) |
| 9 | smalljie | [Codepen](https://codepen.io/smalljie/pen/wvRBWpN) |
| 10 | Evan | [Codepen](https://codepen.io/evanz1215/pen/jOXErRE) |
| 11 | 大頭 | [Codepen](https://codepen.io/d22495521/pen/YzdPqvG?editors=0112) |
| 12 | rainnping | [Codepen](https://codepen.io/rainnping/pen/XWoJNdy) |
| 13 | zona | [Codepen](https://codepen.io/w242920/pen/ExGaNXJ?editors=0010) |
| 14 | AYA | [Codepen](https://codepen.io/NoNameNote/pen/dywPOvP) |
| 15 | David0799 | [Codepen](https://codepen.io/David0799/pen/MWZYyMR) |
| 16 | wendy | [Codepen](https://codepen.io/siaochanwu/pen/yLGyVKR)
| 17 | collinkao | [Codepen](https://codepen.io/collin0825/pen/poqvNOx?editors=0010) |
| 18 | cataska | [Codepen](https://codepen.io/lovecankill/pen/Jjwobed) |
| 19 | Ann Chou | [Codepen](https://codepen.io/annchou_illu/pen/LYMEbXG) |
| 20 | Aden | [Codepen](https://codepen.io/Osases/pen/ZEVYLeE) |
| 21 | Wei_Rio | [Codepen](https://codepen.io/wei_wu/pen/WNLbRjm) |
| 22 | LinaChen | [Codepen](https://codepen.io/LinaChen/pen/WNLbRLV) |
| 23 | Sui | [Codepen](https://codepen.io/suihsilan/pen/yLGyMLJ?editors=0010) |
| 24 | ejchuang | [Codepen](https://codepen.io/EJChuang/pen/mdayWqZ?editors=1111) |
| 25 | 精靈 | [Codepen](https://codepen.io/vesbexih-the-bashful/pen/ZEVYemv?editors=0010) |
| 26 | 地球儀 | [Codepen](https://codepen.io/dayday1222/pen/vYvEZNJ?editors=0011) |
| 27 | orias_000 | [Codepen](https://codepen.io/qoq77416416/pen/BavyZmG?editors=0011) |
| 28 | BalaBambe | [Codepen](https://codepen.io/bambe-chen/pen/oNJgwew) |
| 29 | Kaya | [Codepen](https://codepen.io/laron9486/pen/WNLbogJ) |
| 30 | 王偉青 | [Codepen](https://codepen.io/lovegull/pen/mdaywjj?editors=0012) |
| 31 | jasperlu005 | [Codepen](https://codepen.io/uzzakuyr-the-reactor/pen/RwENgOY?editors=0011) |
| 32 | Leo | [Codepen](https://codepen.io/Aruminiya/pen/mdayMro?editors=0011) |
| 33 | 喃喃 | [Codepen](https://codepen.io/VeLario/pen/KKbwXaQ?editors=0011) |
| 34 | JJ Wu | [Codepen](https://codepen.io/jesswu/pen/YzdPEGx?editors=0011) |
|35|HsienLu|[Coden](https://codepen.io/Hsienlu/pen/qBLEVwV?editors=0011)|
| 36 | davidchengtw | [Codepen](https://codepen.io/davidcheng/pen/bGONYdj) |
| 37 | 黃士桓 | [codePen](https://codepen.io/shr-huan-huang/pen/VwqYydR) |
| 38 | JohnChien | [Codepen](https://codepen.io/glqwazid-the-selector/pen/qBLEpwg) |
| 39 | Ingrid | [Codepen](https://codepen.io/ingrid-chi/pen/eYbmVxo?editors=0011) |
| 40 | azami | [Codepen](https://codepen.io/azami/pen/QWzwBWZ) |
| 41 | LiShang | [Codepen](https://codepen.io/LiShang/pen/eYbmjjJ) |
| 42 | Kent | [Codepen](https://codepen.io/labkunz/pen/xxmbaZP?editors=0011) |
| 43 | jerry456789 | [Codepen](https://codepen.io/aria198a/pen/qBLEMqo?editors=0011) |
| 44 | Daphne | [Codepen](https://codepen.io/DaphneShen/pen/KKbwxgz?editors=0011) |
| 45 | 瑀君 | [Codepen](https://codepen.io/yennnnn/pen/gOZbLEG) |
| 46 | Yen | [Codepen](https://codepen.io/TZU-HUANG-YEN/pen/vYvEdZL) |
| 47 | 金魚 | [Codepen](https://codepen.io/cso-goldfish/pen/PoXwXeY) |
| 48 | Lulu | [Codepen](https://codepen.io/Lin-Lulu/pen/poqvYgG?editors=1011) |
| 49 | Amberhh | [Codepen](https://codepen.io/Amberhh/pen/dywPxbd) |
| 50 | Iris | [Codepen](https://codepen.io/iris831206/pen/BavyXJa?editors=0011) |
| 51 | PoWei#8484 | [Codepen](https://codepen.io/harrison-wei-lai/pen/LYMEwmJ?editors=0011) |
| 52 | PollyPO_Lee | [Codepen](https://codepen.io/pollypo1986/pen/JjwdNJz) |
| 53 | Che1z | [Codepen](https://codepen.io/Shih-Min-Hung/pen/OJrVgOZ?editors=1111) |
| 54 | 變羊魔法 | [Codepen](https://codepen.io/cssf998811/pen/yLGNPaZ) 
| 55 | Tian | [Codepen](https://codepen.io/ccyy915/pen/OJrVQOR) |
| 56 | Ataraxia | [Codepen](https://codepen.io/ataraxia8888/pen/oNJgqwW) |
| 57 | curry | [Codepen](https://codepen.io/Ted19851223/pen/NWeqOGR?editors=0011) |
| 58 | SkyWoW | [Codepen](https://codepen.io/WoW-Sky/pen/RwEPOwM?editors=0011) |
| 59 | Sebastian | [Codepen](https://codepen.io/SebastianWei/pen/PoXPobK?editors=0011) |
| 60 | Cami | [Codepen](https://codepen.io/fayevivi/pen/jOXbmVy?editors=0011) |
| 61 | Emily4869 | [Codepen](https://codepen.io/aptx4869Emily/pen/WNLrwEx?editors=0011) |
| 62 | jiun7523 | [Codepen](https://codepen.io/jiun-jiun/pen/LYMGYmp?editors=0011) |
| 63 | 小明#4408 | [Codepen](https://codepen.io/ujlylmbv-the-lessful/pen/GRPogQX?editors=0011) |
| 64 | shangchu | [Codepen](https://codepen.io/shangchu0412/pen/qBLbwor?editors=0011) |
| 65 | hungya | [Codepen](https://codepen.io/hungya777/pen/QWzNBoQ?editors=1010) |
| 66 | owen | [Codepen](https://codepen.io/owen-dong/pen/KKbMwWG?editors=0011) |
| 67 | Alice | [Codepen](https://codepen.io/AliceZhao/pen/LYMRZOX?editors=0011) |
| 68 | EdHsu | [Codepen](https://codepen.io/Ed-Hsu/pen/abPmBqp) |
| 69 | yoyo#2678 | [Codepen](https://codepen.io/djmliogn-the-flexboxer/pen/rNoMwgK) |
| 70 | rChinnnn | [Codepen](https://codepen.io/rChinnnn/pen/KKbNeBY) |
| 71 | Carey#1010 | [Codepen](https://codepen.io/Leo4077/pen/MWZpdOB?editors=0011) |
| 72 | ssshane | [Codepen](https://codepen.io/sam6091260/pen/VwqbyNg?editors=0011) |
| 73 | Lydia | [Codepen](https://codepen.io/lydia-chen/pen/dyENROx) |





```markdown=
| 0 | user | [Codepen]() |
```
https://codepen.io/VeLario/pen/KKbwXaQ?editors=0011