🏅 DAY31 每日任務

tags: JS 直播班 - 2021 秋季班

透過函式設計處理非同步

請同學觀看完 參考章節影片 再進行作答。

問題

記得先載入 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 中回報就算完成了喔! 解答請參考下圖（需打開程式碼的部分觀看）

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