---
tags: JS 直播班 - 2023 秋季班
---
# 🏅 Day 31 - AJAX 非同步觀念

執行以下程式，
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);

> 記得載入 axios 的 CDN
> `https://cdnjs.cloudflare.com/ajax/libs/axios/1.5.0/axios.min.js`

## 回報流程

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


<!-- 解答：

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 / 答案 |
|:---------------:|:---------------------------------------------------------------------:|
|銀光菇|[CodePen](https://codepen.io/genesynthesis/pen/KKJQQjm)|
|pinyi_9|[CodePen](https://codepen.io/Wpypy/pen/rNPJdMr?editors=0011)|
|Peng|[CodePen](https://codepen.io/H-Peng/pen/OJdQvxW?editors=1010)|
|⭐️小正|[CodePen](https://codepen.io/colorgolden/pen/zYeRWLb?editors=1011)|
|yuan!|[CodePen](https://codepen.io/townyuan/pen/NWoyYwv)|
|小夏|[CodePen](https://codepen.io/michaelhsia/pen/JjxpLeP)|
|celinelinnn|[CodePen](https://codepen.io/celinephoebe/pen/xxMYWQv)|
| 精靈 | [CodePen](https://codepen.io/justafairy/pen/JjxpLzj) |
|Moreene|[CodePen](https://codepen.io/Moreene/pen/bGzLvyL)|
| damon0323 | [CodePen](https://codepen.io/swk9eny2/pen/poGaLmx?editors=1011) |
| Chia Pin | [CodePen](https://codepen.io/joker-cat/pen/OJdQZVz) |
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/GRzQdJv?editors=1111) |
| Winnie | [CodePen](https://codepen.io/codepen-io-winnie/pen/jOdZxqQ?editors=0011) |
| Helen | [CodePen](https://codepen.io/milkteamonster/pen/VwgQxGM?editors=0011) |
| yuan2781 | [CodePen](https://codepen.io/ismebir/pen/vYbdjee) |
| Oria | [CodePen](https://codepen.io/kajing/pen/poGaKjj?editors=1111) |
| xin | [CodePen](https://codepen.io/Estherrrrrr999/pen/JjxpZGr) |
| Allen | [CodePen](https://codepen.io/pen/?editors=1111) |
| Uli | [CodePen](https://codepen.io/uli1313/pen/poGaKOR) |
| Ataraxia | [CodePen](https://codepen.io/ataraxia8888/pen/zYePEoa) |
| 維哲 | [CodePen](https://codepen.io/kwz1202/pen/mdvXxZW) |
| cest_jessie | [CodePen](https://codepen.io/itsjessiechen/pen/JjxpvxN) |
|yuling|[Codepen](https://codepen.io/igzdflpu/pen/qBgxyBL)|
| lychee_kk | [CodePen](https://codepen.io/kakakala/pen/rNPJryr) |
| kuanju27 | [CodePen](https://codepen.io/Eero-Chiao/pen/LYqQBKp) |
| claire | [CodePen](https://codepen.io/yi-wen-chen/pen/PoVQdYK) |
| kawa | [CodePen](https://codepen.io/z83xji6/pen/qBgxMQm?editors=1111) |
| ann6212 | [CodePen](https://codepen.io/yqmegupa-the-styleful/pen/ZEwrqVJ?editors=1111) |
| Yijing | [CodePen](https://codepen.io/Yi-Jing-71080635/pen/MWLQzWO) |
| SHUO | [CodePen](https://codepen.io/xrzarxkl-the-reactor/pen/gOqvZqj?editors=1111) |
| 奔跑吧(GTR150) | [CodePen](https://codepen.io/Wer-Qwe/pen/bGzLzGJ?editors=1111) |
| 荷菓かのり | [CodePen](https://codepen.io/oogxwkvw-the-builder/pen/poGaGgJ?editors=1011) |
| Eden |[Codepen](https://codepen.io/iseden/pen/WNPMPYw)|
| dora | [CodePen](https://codepen.io/dorayu/pen/zYeRjEv?editors=1010) |
| gebyman | [CodePen](https://codepen.io/gebyman/pen/rNPJRbR?editors=1010) |
| yu.t_liu | [CodePen](https://codepen.io/pen/?editors=0010) |
| Alyce | [CodePen](https://codepen.io/alycehwy/pen/abXqxwv?editors=0010) |
| Alyce | [CodePen](https://codepen.io/RoganHsu/pen/MWLQRQN?editors=1011) |
| shuuu | [CodePen](https://codepen.io/afjrvjzl-the-bashful/pen/yLZKBLy?editors=1011) |
| RX00 | [CodePen](https://codepen.io/llqzknqv-the-styleful/pen/MWLVeeO?editors=1011) |
| stone4584 | [CodePen](https://codepen.io/Royen0506/pen/WNPzozb?editors=1111) |
| ChrisSQR | [CodePen](https://codepen.io/ChrisSQR/pen/dyamWjj) |
| tanuki5863 | [CodePen](https://codepen.io/tanuki320/pen/eYxMGJJ?editors=1010) |
| JUNEW | [CodePen](https://codepen.io/June-W/pen/KKJorMW) |
| runweiting | [CodePen](https://codepen.io/weiting14/pen/dyaOqoX) |
| 郭芙蘭#6374 | [CodePen](https://codepen.io/flora_Kuo/pen/yLZKmwW?editors=1011) |
| 風羽 | [CodePen](https://codepen.io/Joy-Huang/pen/mdvLJJX?editors=1111) |
| Mattie | [CodePen](https://codepen.io/mattielin/pen/oNmdYVd) |
| Lainie | [CodePen](https://codepen.io/Lainie88/pen/JjxvvLo?editors=1010) |
| yaoling.liang |[CodePen](https://codepen.io/Yao-Ling-L-/pen/bGzMKdx)|
| 保羅 |[CodePen](https://codepen.io/paul-1997/pen/NWozNXo?editors=1011)|
| xuan |[CodePen](https://codepen.io/xuan0915/pen/dyaKwbr?editors=1011)|
| MY | [CodePen](https://codepen.io/ahmomoz/pen/qBgKLpz?editors=1111) |
| santu0868 | [CodePen](https://codepen.io/HatsumiSan/pen/QWYrBQG) |
| Ching | [CodePen](https://codepen.io/tzuchingg/pen/NWoBPMv?editors=1011) |
| Iris | [CodePen](https://codepen.io/iris831206/pen/MWLBEqM?editors=1112) |
| nini1202desu | [CodePen](https://codepen.io/tvxq5206/pen/RwvBmBg?editors=1011) |
| hsu0921 | [CodePen](https://codepen.io/HSUANIN0327/pen/oNmPLLw) |
| bf_tsai | [CodePen](https://codepen.io/BF-Tsai/pen/jOdvrRb?editors=0010) |
|(https://codepen.io/HSUANIN0327/pen/oNmPLLw) |
| macihuang | [CodePen](https://codepen.io/macy1215/pen/abXamKR) |
| NathanJames |[CodePen](https://codepen.io/ufo060204/pen/ZEwqQXy)|
| Rochel |[Codepen](https://codepen.io/rochelwang1205/pen/Jjxmpwj?editors=1012)|
| 歐陽龍龍#1061 | [CodePen](https://codepen.io/dizzydog-rgb/pen/VwgEJNr) |
| skypassion5000 | [CodePen](https://codepen.io/skypassion5000/pen/rNPqXbY?editors=0011) |
| davidtt | [CodePen](https://codepen.io/David-Tsai/pen/oNmQpBp?editors=1011) |
| Daylily | [CodePen](https://codepen.io/daylily/pen/GRzweVx) |
| Andy | [CodePen](https://codepen.io/andy31342/pen/KKJbWzj) |
| 阿榮 | [CodePen](https://codepen.io/codeitaday/pen/oNmmBNR) |
| sponge | [CodePen](https://codepen.io/biunpujm-the-flexboxer/pen/gOqqJbQ) |
| 辣椒 | [Codepen](https://codepen.io/chilichen118/pen/XWOGmNY) |
| JasonFu | [Codepen](https://codepen.io/jie-Fu/pen/gOEamPR?editors=1011) |

<!--快速複製
| Discord | [CodePen]() |
-->