---
# System prepended metadata

title: "\U0001F3C5 3/26 (五) 每日任務"
tags: [JS 直播班 - 2021 春季班]

---

# 🏅 3/26 (五) 每日任務
###### tags: `JS 直播班 - 2021 春季班`

透過函式設計處理非同步 
---
請同學觀看完 [參考章節影片]() 再進行作答。


問題
---
記得先載入 axios 的 CDN
```htmlembedded=
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
```
1. 執行以下程式，請問 console.log 的顯示順序為何? 

HTML
```htmlembedded=
<p class="title"></p>
```
JS
```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 ?
```js=
const title = document.querySelector('.title');
title.textContent = arr[0].name;
```

填入區間
```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); 
    // 區間 1
}
console.log(arr); 
 // 區間 2
```


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

![](https://i.imgur.com/6UoJVtD.png)

<!-- 解答一
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
-->

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