# 🏅 3/26 (五) 每日任務
###### 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 中回報就算完成了喔! 解答請參考下圖（需打開程式碼的部分觀看）


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

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