---
# System prepended metadata

title: "\U0001F3C5 Day 24 - AJAX 非同步觀念"
tags: [JS 直播班 - 2025 秋季班]

---

# 🏅 Day 24 - AJAX 非同步觀念

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

```javascript=
let arr = [];

axios.get('https://hexschool.github.io/ajaxHomework/data.json')
  .then(function(response) {
    console.log('資料有回傳了');
    arr = response.data;
  });

console.log(arr);
```
> 記得載入 axios 的 CDN
> `https://cdnjs.cloudflare.com/ajax/libs/axios/1.5.0/axios.min.js`


<!-- 解答：  

1. 
console 的輸出結果為:
[]
資料有回傳了


2.
首先 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('資料有回傳了')」 之後被賦值。
-->