---
# System prepended metadata

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

---

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

AJAX 非同步觀念
---

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


問題
---
記得先載入 axios 的 CDN
```htmlembedded=
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
```

執行以下程式，
1. 請問 console 顯示的輸出結果為何? 
2. 嘗試用自己的理解描述為什麼。

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

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

<!-- 解答一
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('資料有回傳了')」 之後被賦值。
-->