---
# System prepended metadata

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

---

# 🏅 Day 31 - 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`



## 回報流程

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

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

<!-- 解答：  

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




回報區
---
| #   | Discord | CodePen / 答案 |
| --- | ----- | ----- |
|  01   |    voke   | [CodePen](https://codepen.io/FiSi-the-lessful/pen/RwXMdNe) | 
|  02   |   Hedwig  | [CodePen](https://codepen.io/adirehfz-the-encoder/pen/vYovyBr?editors=1111) | 
|  03   |   泊岸  | [CodePen](https://codepen.io/qoq77416416/pen/vYovXbR?editors=0011) | 
|  04   |   嚼勁先生  | [CodePen](https://codepen.io/James520284/pen/poMqNNy) | 
|  05  |   tim  | [CodePen](https://codepen.io/jskrtivy-the-animator/pen/oNKJYBd?editors=1011) | 
| 06 | Dolce_墨 | [CodePen](https://codepen.io/DolceTseng1026/pen/NWQebrK) | 
| 07 | david1819 | [CodePen](https://codepen.io/David-Lin-the-vuer/pen/JjgwbWp) | 
| 08 | charlottelee | [CodePen](https://codepen.io/char849/pen/RwXEoBO) |
| 09 | brucelee0629 | [CodePen](https://codepen.io/xxhdklwi-the-decoder/pen/bGXOgjo?editors=1011) |
| 09 | 毛巾 | [CodePen](https://codepen.io/bqdcjboa-the-solid/pen/poMqRGO) |
| 10 | yuyuhunter_0509 | [CodePen](https://codepen.io/KRcube/pen/qBeLmrx?editors=0011) | 
| 11 | Kaya | [CodePen](https://codepen.io/kayaribi/pen/xxvmdva) | 
| 12 | jimmy.0706 | [CodePen](https://codepen.io/JimmyMao/pen/MWNZEga?editors=1011) |
| 13 | GTR150 | [CodePen](https://codepen.io/Wer-Qwe/pen/jOgXGzq?editors=1111) |
| 14 | Mike | [CodePen](https://codepen.io/mike2049/pen/mdNaqLE?editors=0011) |
| 15 | Mos | [CodePen](https://codepen.io/mos25399/pen/rNXoYXb?editors=0011) |
| 16 |  JIA  | [CodePen](https://codepen.io/nzaicwlw-the-styleful/pen/OJKrgWR?editors=0011) | 
|  17   |  chris     | [CodePen](https://codepen.io/chris-chen-the-selector/pen/OJKrvqg?editors=0011) |
| 18 | yuyeh_1212 | [CodePen](https://codepen.io/yuyeh1212/pen/zYgymLP) |
| 19 | Sonia | [CodePen](https://codepen.io/YUJOU/pen/rNXoQqQ?editors=1010) |
| 20 | kaka_945 | [CodePen](https://codepen.io/kay945/pen/mdNavrz) |
| 21 | mercury2508. | [CodePen](https://codepen.io/Mercury2508/pen/QWezYGW) |
| 22 | Ruby | [CodePen](https://codepen.io/xivgaijl-the-selector/pen/zYgybxj) |
|23|睿睿|[CodePen](https://codepen.io/uwmrsusb-the-solid/pen/QWezPZo?editors=0011)|
|24|.tsz_ying|[CodePen](https://codepen.io/bekgnohe-the-selector/pen/vYovwGr?editors=1011)|
|25| ycl325.etheddie|[CodePen](https://codepen.io/wdvikfuz-the-selector/pen/ExqrxrM)|
|  26  | Ariel | [CodePen](https://codepen.io/ariel0510/pen/RwXvPWy?editors=0011) |
|  27  | Rogan | [CodePen](https://codepen.io/RoganHsu/pen/wvVNKgW?editors=1111) |
|  28  | 是在哈囉 | [CodePen](https://codepen.io/miyxdhem-the-solid/pen/YzmBWaz?editors=1111) |
|29|yuling|[CodePen](https://codepen.io/yu-ling-peng/pen/abeXEKO?editors=0011)|
|  30   |   陳小廷    | [CodePen](https://codepen.io/ting1124/pen/jOgdZEo) | 
|  31   |   610    | [CodePen](https://codepen.io/YI-LING-LIU/pen/oNKmyop) | 
|  32   |   joylu0902    | [CodePen](https://codepen.io/joylu0902/pen/WNVPdwM) | 
|  33   |   Jainee    | [CodePen](https://codepen.io/Jainee0110/pen/xxvBwKp) |
| 34 | Glen_69515 | [codePen](https://codepen.io/glenyaochih/pen/OJKqMEO?editors=1111)|
| 35 | ab567ab5 | [codePen](https://codepen.io/WanTzu-Chiang/pen/eYqXdoq?editors=0011)|
| 36 | Chun     | [CodePen](https://codepen.io/Chun_debbie/pen/gOVERgV?editors=0011) | 
| 35 | Tatsu | [CodePen](https://codepen.io/chindesu0207/pen/VwoRdGQ) | 
|36|Hailey|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/vYoPbmW?editors=0111)|
|37|Lotte|[CodePen](https://codepen.io/hmkdoxuj-the-decoder/pen/VwoNZKb?editors=0011)|
|38|野鴿|[CodePen](https://codepen.io/HoshinoSyouta/pen/PoMgNXy?editors=1011)|
| 39 | jerry_66983      | [CodePen](https://codepen.io/Barry-C/pen/gOVyeBV?editors=1111) |
| 40 | Emma  | [CodePen](https://codepen.io/Emma0919/pen/yLmrZMw) | 
|    41 |  Celine     | [CodePen](https://codepen.io/szuning/pen/abeXMLj) |
| 42 | Joannehu  | [CodePen](https://codepen.io/nelbabkv-the-flexboxer/pen/GRVaRza?editors=1011) | 
| 43 |   阿鼠    | [CodePen](https://codepen.io/wuasu/pen/ZEgdPLz) | 
|44|Amy(咂摳)| [CodePen](https://codepen.io/nnxucgmc-the-builder/pen/BaXXNgJ?editors=0011) 
|45|JRz| [CodePen](https://codepen.io/JRZHENG/pen/zYggrvw?editors=1111) 
|  46  |  Jack  | [CodePen](https://codepen.io/kxbhixte-the-sasster/pen/oNKKLdw?editors=0011) 
|  47   |  alec1203     | [CodePen](https://codepen.io/soloayaya/pen/JjggRaB?editors=1012) | 
| 48 | Nocab | [CodePen](https://codepen.io/PeihanWang/pen/eYqqERv?editors=0011) | 
| 49 | 蘑菇星星 | [CodePen](https://codepen.io/brrrieon-the-vuer/pen/gbYYmgQ?editors=1112) | 
| 50 | KOMATSU PEI | [CodePen](https://codepen.io/Komatsu2021/pen/gbYYmKE?editors=0012) | 
| 51 | Ana | [Codepen](https://codepen.io/Ana-Wu/pen/OPLLmep?editors=0011) |
| 52 | Seris | [Codepen](https://codepen.io/Dale-Chien/pen/JoPPvKN) |
| 53 | Chuang | [Codepen](https://codepen.io/uidoytjq-the-solid/pen/wBwZKXP?editors=1010) |


<!-- 可複製下方格式
|     |       | [CodePen]() | 
