# 🏅 DAY30 每日任務
###### tags: `JS 直播班 - 2021 秋季班`

AJAX 非同步觀念
---

請同學先觀看完 [參考章節影片](https://courses.hexschool.com/courses/20201113/lectures/34094777) 再進行作答。

問題
---
記得先載入 axios 的 CDN

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

執行以下程式，
1. 請問 console 顯示的輸出結果為何?
2. 嘗試用自己的理解描述為什麼。

let arr = [];
axios.get('https://hexschool.github.io/ajaxHomework/data.json').then(function(response){
    console.log('資料有回傳了');
    arr = response.data;
})
console.log(arr);

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


<!-- 解答一
console 的輸出結果為:

[]
資料有回傳了
-->

<!-- 解答二
首先 AJAX 的資料回傳需要時間、會發生延遲，
由於 axios 的語法預設是非同步的，它允許在 AJAX 的資料回傳以前繼續往下執行程式，因此範例程式碼的 console.log 顯示順序是:

let arr = [];
axios.get('https://hexschool.github.io/ajaxHomework/data.json').then(function(response){
console.log('資料有回傳了'); // 順序二
arr = response.data;
})
console.log(arr); // 順序一

補充: 需要注意的是， arr 會在 AJAX 資料回傳後才被賦值為 response.data，以範例程式碼為例，arr 會在 「console.log('資料有回傳了')」 之後被賦值。
-->

| Slack | CodePen |
|:----------------:|:-------------------:|
| Karen Huang | https://codepen.io/Coding_Snorlax/pen/YzxJmGg |
| Iris Huang | https://codepen.io/ythuang/pen/VwzgOXJ |
|CloThEs | https://codepen.io/bogwdnxx-the-sans/pen/abyXrKR
|阿和|https://codepen.io/shnny/pen/gOxqJza?editors=0011|
|Aaron Tu|https://codepen.io/aarontu/pen/QWMYRBv|
|米米|https://codepen.io/Jameshsu0407/pen/gOxqJyM?editors=1011|
| POPEYE | https://codepen.io/popeye_ux/pen/MWvLdLV |
| Elaine Liu | https://codepen.io/elaine7598/pen/vYJbqEL?editors=1010 |
| Sam | https://codepen.io/sam-hsu/pen/jOLdjMx |
|洋蔥|https://codepen.io/oikdkmxq-the-looper/pen/QWMYXdm?editors=0011|
|Jasper|https://codepen.io/li-jasper/pen/BadMgWw
| Jun Ting Lin | https://codepen.io/jake1155/pen/RwZvzgo |
|tingyu|https://codepen.io/dgltu/pen/ExvrBvq?editors=1010|
|lumei|https://codepen.io/l_umei/pen/yLoZdvG|
|Cheng pei-hsuan|https://codepen.io/PaCheng/pen/zYdGKpO|
|Tim Lin|https://codepen.io/TimmyLin/pen/GRvzbzO |
|Gill|https://codepen.io/Gill-Chin/pen/BadMgGr?editors=0011 |
| Yunei | https://codepen.io/Yunei/pen/porGXGY |
| 劉維倫 | https://codepen.io/lun0223/pen/VwzgoPr?editors=1010 |
| YC | https://codepen.io/YCLu/pen/ExvrqwZ |
|Gui|https://codepen.io/guitimliu/pen/abyMoOq|
| Peter Chen | https://codepen.io/yuckugjy-the-sasster/pen/WNEmerr?editors=1112 |
|kk| https://codepen.io/potatokaka/pen/porYzKW?editors=1011|
| ZOE WU | https://codepen.io/Zoechiueh/pen/KKvEPYy?editors=0011 |
|Phil |https://codepen.io/ctkeftjp-the-animator/pen/qBXvBRB?editors=1111 |
|陳暐中 |https://codepen.io/wei-z/pen/KKvEwNO?editors=1112 |
|Jocelyn| https://codepen.io/enjoyful/pen/qBXvdMg?editors=0011|
|Steven Chan | https://codepen.io/Steven1220/pen/oNeVjxN?editors=1111 |
|蔣秉彣 | https://codepen.io/the-pierre/pen/wvqOKOX?editors=1010 |
|張喆|https://codepen.io/wow767t/pen/MWvxaNM|
|Bonnie|https://codepen.io/bonnieli1414/pen/zYdbBZX?editors=1011|
|Trista|https://codepen.io/trista6140/pen/WNEmxdJ|
|Louis|https://codepen.io/Louis164156/pen/NWvJRgJ?editors=1111|
| 黃士桓 | https://codepen.io/shr-huan-huang/pen/dyzrNrO?editors=0012 |
| ZY Hsu | https://codepen.io/zihyin/pen/YzxgVWd?editors=0011 |
| BeanHuang | https://codepen.io/Beanhuang/pen/VwzRWze?editors=0011 |
|鄭安志|https://codepen.io/lwmtsgek/pen/Yzxgjzz?editors=1111|
|鉦勝|https://codepen.io/atckmax823/pen/MWvxqPa?editors=1011|
| Kelvin Hsu | https://codepen.io/kelvin001/pen/dyzrWMg?editors=1011 |
|AKI|https://codepen.io/akichen27/pen/porYqLz|
|雪莉|https://codepen.io/utshang216/pen/jOLJjGZ|
|danny123|https://codepen.io/binlandz123/pen/OJjGXQp?editors=1010 |
| YuriT | https://codepen.io/wenfisht/pen/eYEoKOZ |
|Sandy|https://codepen.io/Sandy_L/pen/porBMdY?editors=0011|
| 傅劍軒 | https://codepen.io/seonkuraito/pen/bGryByd?editors=0010 |
| LTL| https://codepen.io/ltlin93/pen/YzxbNRX |
| kailun| https://codepen.io/Kailun/pen/qBXGrdB |
| Lai | https://codepen.io/co_lai/pen/gOxJWbj?editors=1011 |
| Riley | https://codepen.io/jjpxbprd/pen/JjyqZep |
|大衛|https://codepen.io/exnsrpjc/pen/MWvMmMj |
|傑瑞|https://codepen.io/auatwood909815/pen/QWMXJOE?editors=1111|
|小K|https://codepen.io/kelen1995/pen/QWMXYdY|
|艾瑞克|https://codepen.io/ericla/pen/PoKMPOM?editors=0010|
|許閔翔|https://codepen.io/oupbzfxq-the-scripter/pen/porMmxX|
paul|https://codepen.io/printfootya/pen/OJxLYeE?editors=1011|
|PeggyTsai|https://codepen.io/pei-chi-tsai/pen/ExwxLYv?editors=0010|
|Genos|https://codepen.io/pb220416/pen/ZEXERxV|
|Hamaji| https://codepen.io/hamajibashi/pen/rNGawwN |
|YOYO| https://codepen.io/lumedkle/pen/GRMgVRB?editors=1111 |
|Jie Du| https://codepen.io/qgqonost-the-flexboxer/pen/RwLPWRp?editors=0010 |
|Alvin|https://codepen.io/pen/?editors=1011|
|Jeff|https://codepen.io/jeff-cheng/pen/yLzYwwG?editors=1011|
| Aya | https://codepen.io/NoNameNote/pen/xxXOWpJ |
|Zooey Cheng|https://codepen.io/noraneko0430/pen/KKXNEWP?editors=0012|
|Trista|https://codepen.io/trista6140/pen/ExwWPgw|
|ShinyChen | https://codepen.io/shinychen/pen/mdBjpdq |