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

AJAX 非同步觀念
---

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

問題
---
記得先載入 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('資料有回傳了')」 之後被賦值。
-->