### 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