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

透過函式設計處理非同步
---
請同學觀看完 [參考章節影片](https://courses.hexschool.com/courses/20201113/lectures/34094778) 再進行作答。

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

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

1. 執行以下程式，請問 console.log 的顯示順序為何?

HTML

<p class="title"></p>

JS

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

function renderData(){
    console.log(arr);  // 順序 ?
}
console.log(arr);  // 順序 ?

.
2. 承上題，如果希望加入以下 JS，讓 class 為 title 的 p 標籤可以正常的呈現「王小名」這三個字，則應該將以下 JS 填入區間 1 還是區間 2 ?

const title = document.querySelector('.title');
title.textContent = arr[0].name;

填入區間

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

function renderData(){
    console.log(arr); 
    // 區間 1
}
console.log(arr); 
 // 區間 2

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


<!-- 解答一
console 的執行順序為:

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

function renderData(){
console.log(arr); // 順序 3
}
console.log(arr); // 順序 1
-->

<!-- 解答二
應該填入區間一
-->

| Slack | CodePen |
|:----------------:|:-------------------:|
| Karen Huang | https://codepen.io/Coding_Snorlax/pen/rNzbWQp |
| 米米 | https://codepen.io/Jameshsu0407/pen/wvqZmyd?editors=1011 |
| Iris Huang | https://codepen.io/ythuang/pen/abyxYYx |
| POPEYE | https://codepen.io/popeye_ux/pen/OJjGvZp |
|CloThEs | https://codepen.io/bogwdnxx-the-sans/pen/gOxyeyW|
|Cheng Pei-hsuan|https://codepen.io/PaCheng/pen/zYdGKpO|
| Elaine Liu | https://codepen.io/elaine7598/pen/WNEWzqz?editors=1010 |
| Sam| https://codepen.io/sam-hsu/pen/eYEoMXx |
| Andy Huang | https://codepen.io/HsuHuaHuang/pen/BadExLr
|lumei|https://codepen.io/l_umei/pen/KKvYRgb|
|阿和|https://codepen.io/shnny/pen/MWvRGeR?editors=1011|
| YC | https://codepen.io/YCLu/pen/bGrJMxO |
| 劉維倫 | https://codepen.io/lun0223/pen/zYdXjMq?editors=1011 |
|洋蔥|https://codepen.io/oikdkmxq-the-looper/pen/jOLRxQo?editors=0011
| Arista | https://codepen.io/arista-hsieh/pen/MWvRXWa |
| Yunei | https://codepen.io/Yunei/pen/abyxKOW |
| YuriT | https://codepen.io/wenfisht/pen/QWMPrPX |
| BeanHuang | https://codepen.io/Beanhuang/pen/KKvYewK?editors=1011 |
|Jasper|https://codepen.io/li-jasper/pen/NWvmzxQ |
|Louis|https://codepen.io/Louis164156/pen/abyxKpy?editors=1111 |
|Phil|https://codepen.io/ctkeftjp-the-animator/pen/BadEPqZ?editors=0011 |
| ZOE WU | https://codepen.io/Zoechiueh/pen/yLorqxE?editors=1010 |
| Peter Chen | https://codepen.io/yuckugjy-the-sasster/pen/KKvYxmJ?editors=1111 |
| 陳暐中 | https://codepen.io/wei-z/pen/QWMPVmY?editors=1011 |
| ZY Hsu | https://codepen.io/zihyin/pen/WNEWgPW |
| Bella Shya | https://codepen.io/BellaXie/pen/MWvRqLY?editors=1010 |
| 蔡明達 | https://codepen.io/bmzpfyxe/pen/NWgKQZB |
| Jun Ting Lin | https://codepen.io/jake1155/pen/YzxMJwL |
| Kelvin Hsu | https://codepen.io/kelvin001/pen/RwZOeGY?editors=1111 |
| 雪莉 |https://codepen.io/utshang216/pen/vYJMVRv |
|Calon|https://codepen.io/Calon0118/pen/QWMPZxy |
|Yashien Lin|https://codepen.io/YashienLin/pen/gOxyByY?editors=1011 |
|張喆|https://codepen.io/wow767t/pen/qBXwQKe|
|Gui|https://codepen.io/guitimliu/pen/LYjvXvE|
|tingyu|https://codepen.io/dgltu/pen/KKvYbeY|
|phi|https://codepen.io/aiya861202/pen/eYEmVjR|
| 黃士桓 | https://codepen.io/shr-huan-huang/pen/VwzNNaK?editors=0010 |
|鉦勝|https://codepen.io/atckmax823/pen/dyzLELw?editors=1010|
| yunyi | https://codepen.io/yunyi12374/pen/ZEJbKVW |
|Sandy|https://codepen.io/Sandy_L/pen/QWMPexY?editors=1111|
|有廖先生(Rain) |https://codepen.io/billpop741/pen/xxLNRPX|
|Aaron Tu|https://codepen.io/aarontu/pen/QWMRGRN|
| 傅劍軒 | https://codepen.io/seonkuraito/pen/VwzOmoq?editors=0010 |
| Gill | https://codepen.io/Gill-Chin/pen/xxLNgaB?editors=0011 |
| 格可 | https://codepen.io/catabo/pen/XWawpyy |
| LTL | https://codepen.io/ltlin93/pen/XWawMBJ |
|鄭安志|https://codepen.io/lwmtsgek/pen/QWMRpeP?editors=1011|
Tim Lin|https://codepen.io/TimmyLin/pen/MWvdmzb
| Lai | https://codepen.io/co_lai/pen/jOLomqg?editors=0011 |
| kailun | https://codepen.io/Kailun/pen/mdMYwxJ |
| Trista | https://codepen.io/trista6140/pen/RwZmMZb |
| Bonnie | https://codepen.io/bonnieli1414/pen/OJjYZQz |
| Riley | https://codepen.io/jjpxbprd/pen/qBXGKvY |
|Jocelyn| https://codepen.io/enjoyful/pen/pormQzN|
|kk| https://codepen.io/potatokaka/pen/LYjKpNJ?editors=1011|
|蔣秉彣| https://codepen.io/the-pierre/pen/RwZzrbW?editors=1010|
|Steven Chan |https://codepen.io/Steven1220/pen/vYJqKVB?editors=1111 |
|大衛|https://codepen.io/exnsrpjc/pen/dyzBRYq?editors=0010|
|AKI|https://codepen.io/akichen27/pen/JjyQpXR|
|傑瑞|https://codepen.io/auatwood909815/pen/gOxNZNG|
|小K|https://codepen.io/kelen1995/pen/WNEqPOP|
|艾瑞克|https://codepen.io/ericla/pen/jOLgbom?editors=0011|
|danny123|https://codepen.io/binlandz123/pen/rNzXmpV?editors=1010 |
|乃萱|https://codepen.io/nainaikuo/pen/NWvQmew?editors=1011 |
|許閔翔|https://codepen.io/oupbzfxq-the-scripter/pen/ZEJggmM |
|paul|https://codepen.io/printfootya/pen/dyVbxOw?editors=1011|
|Genos|https://codepen.io/pb220416/pen/GRMRdYg|
|PeggyTsai|https://codepen.io/pei-chi-tsai/pen/RwLwyEb?editors=1011|
|YOYO|https://codepen.io/lumedkle/pen/VwMYoeX|
|Jie Du|https://codepen.io/qgqonost-the-flexboxer/pen/jOGPbgj?editors=1010|
|Alvin|https://codepen.io/Alvin20201116/pen/WNZvYxM?editors=1011|
|Clara|https://codepen.io/ClaraChen/pen/RwLavRM?editors=1011|
| Aya | https://codepen.io/NoNameNote/pen/YzrWLgN |
| Hamaji | https://codepen.io/hamajibashi/pen/wvromoO |