---
tags: JS 直播班 - 2022 秋季班
---
# 🏅 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.1.3/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 / 答案 |
|:---------------:|:---------------------------------------------------------------------:|
| hsiung阿熊#4079 | [Codepen](https://codepen.io/hsiungchi/pen/MWXojKe) |
| 薯餅#3581 | [Codepen](https://codepen.io/ColdingPoTaTo/pen/LYrLRGd) |
| RJRS#9430 | [CodePen](https://codepen.io/RJRS/pen/RwJgGRq) |
| JackC#0411 | [Codepen](https://codepen.io/key0329/pen/abKwmmV) |
| 圈圈#4060 | [codepen](https://codepen.io/wjejfczn-the-bold/pen/XWYgjKR) |
| AuroraC#6539 | [codepen](https://codepen.io/AuroraC/pen/QWxgKdj?editors=1112) |
| Lucie#3831 | [Codepen](https://codepen.io/bisespei/pen/dyKRpzg) |
| KC_8685#9343 | [Codepen](https://codepen.io/cathy7411/pen/NWzgRvq) |
| Winnie#1306 | [Codepen](https://codepen.io/WinnieWuWinnie/pen/bGKRwvV?editors=0012) |
| xherobruce#6825 | [Codepen](https://codepen.io/winwinbruce/pen/BaVZLPN) |
| Rr#2215 | [Codepen](https://codepen.io/rufangcheng/pen/zYazKJW) |
| WEI_RIO#9342 | [CodePen](https://codepen.io/wei_wu/pen/abKwmjG?editors=1010) |
|azami#5986|[Codepen](https://codepen.io/azami/pen/yLEXaRX)|
|Hazel.#6020|[Codepen](https://codepen.io/Hazelhsieh/pen/YzvQGqO?editors=0011)|
|albee#9121|[Codepen](https://codepen.io/albee-chang/pen/wvXezOG?editors=1112)|
|kenki100#0068|[Codepen](https://codepen.io/ken100/pen/mdKwrpY)|
|威爾#1694|[CodePen](https://codepen.io/WILL_Wu/pen/bGKRwJe)|
|Data#9297|[CodePen](https://codepen.io/kirakira72/pen/OJEgRoP)|
|出事了阿伯#9923|[CodePen](https://codepen.io/BradpittLai/pen/qBKjqOv?editors=1010)|
|amy芳#1385|[CodePen](https://codepen.io/amy-chieng/pen/VwdWmvo)|
|黑白兔#0684|[CodePen](https://codepen.io/johnny329/pen/mdKwOOV)|
|YI#0863|[CodePen](https://codepen.io/YI0305/pen/BaVZQKQ?editors=0012)|
|yawun#0042|[CodePen](https://codepen.io/monicalin/pen/XWYgNpx)|
|末次#0236|[CodePen](https://codepen.io/yunjulee/pen/WNyOopE)|
| Eileen#6454 |[CodePen](https://codepen.io/Eileen-io/pen/LYrLbyw)|
| mandylai#4055 |[CodePen](https://codepen.io/mandy-lai-2/pen/oNywYwv)|
| m_m#5493 | [CodePen](https://codepen.io/minnn7716/pen/mdKwOqE) |
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/xxzrRQK?editors=1010) |
|yumy#1940|[Codepen](https://codepen.io/yumyyang/pen/XWYgNOw)|
|Clara#1275|[Codepen](https://codepen.io/bsupixqu/pen/zYazoXg?editors=0010)|
|威0#6919|[codepen](https://codepen.io/n0918679182/pen/QWxgGPx?editors=0012)|
|無名#6427|[codepen](https://codepen.io/Nomoney/pen/RwJgoXp)|
|Hilda#7085|[codepen](https://codepen.io/vwquikad-the-vuer/pen/WNyORZP)|
| YC#2522 | [CodePen](https://codepen.io/YCLu/pen/ZERyLoY) |
| Loran#1105 | [CodePen](https://codepen.io/loranlin/pen/vYrZgQR?editors=1011) |
| 肉桂卷#0625 | [CodePen](https://codepen.io/ginnlee/pen/QWxgdYe?editors=0011) |
|PayRoom|[CodePen](https://codepen.io/water38198/pen/MWXopmb)
|柔柔#1716|[Codepen](https://codepen.io/rouchen/pen/YzvQZEd?editors=1011)|
|雷雷#7844|[Codepen](https://codepen.io/lei-yi-jie/pen/OJEgpoP?editors=0011)|
|心幻羽#0056|[Codepen](https://codepen.io/linglingsyu/pen/gOKRmqO)|
|Benson#6763|[Codepen](https://codepen.io/kumashow/pen/OJEgmPN)|
|Potatolee#7749|[Codepen](https://codepen.io/potatoleee/pen/bGKRWEg?editors=1111)|
|Peng#9811|[Codepen](https://codepen.io/peng-027/pen/qBKjmNw)|
|kuku#3118|[Codepen](https://codepen.io/mengting-ku/pen/RwJgVja)|
| 小白#2406 | [CodePen](https://codepen.io/gracewhite/pen/GRGNdBm) |
| hannahTW#2224 | [CodePen](https://codepen.io/hangineer/pen/bGKRWZL?editors=1111) |
| jimmyFang#9575 | [CodePen](https://codepen.io/pohxiqqo/pen/QWxgvRx?editors=1011) |
| Cream#3449 | [CodePen](https://codepen.io/frxdwbbi-the-sasster/pen/qBKjjym) |
|勁辣雞腿寶#5817|[Codepen](https://codepen.io/orz311013/pen/rNKwwYV?editors=1011)
|jackson204#6363|[Codepen](https://codepen.io/jackson204/pen/zYazERe?editors=1111)|
|我是泇吟#5189|[CodePen](https://codepen.io/kljuqbxs/pen/oNywoKp)|
|RayChen#6088|[CodePen](https://codepen.io/hsiungchi/pen/MWXojKe)|
|masterYan#2480|[CodePen](https://codepen.io/htzwgoqt-the-looper/pen/eYKRyqV?editors=1111)|
|Hironaka#7367|[CodePen](https://codepen.io/Hironaka0815/pen/YzvQepz?editors=1111)|
|Silvialu#4521|[CodePen](https://codepen.io/Silvia091640/pen/RwJgQoP)|
|yen#5757|[CodePen](https://codepen.io/TZU-HUANG-YEN/pen/oNdPgqY?editors=1011)|
|Kimi #9564|[CodePen](https://codepen.io/kimihu91/pen/KKeqoMb)|
| cbs#9007 |[Codepen](https://codepen.io/wasdjk/pen/vYrZRxZ)|
| shinyhung#3825 |[Codepen](https://codepen.io/sean_1215/pen/qBKjPqw?editors=1010)|
|bingsu#2362|[Codepen](https://codepen.io/pmyfr/pen/BaVZVBj?editors=0011)|
|Mylène#2481|[Codepen](https://codepen.io/hamajibashi/pen/rNKwddV)|
|beta lin#1445|[Codepen](https://codepen.io/linbeta/pen/yLEXEMv)|
|Sentiments#4883|[codepen](https://codepen.io/Sentiments/pen/MWXorgK)|
|jacky010080#0880|[CodePen](https://codepen.io/Yen-Jung-Chen/pen/gOKRZYB?editors=1010)|
| Jill#5577 | [CodePen](https://codepen.io/Jillkate/pen/bGKRJzV) |
| suihsilan#9485 | [CodePen](https://codepen.io/suihsilan/pen/BaVZeaj?editors=0010) |
|楓之聲#6945|[Codepen](https://codepen.io/sshane258/pen/abKwepy)|
|軟綿綿 (๑•ᴗ•๑) ♡#3627|[CodePen](https://codepen.io/Connie-Chien/pen/YzvQmaR?editors=0010)|
|William Lai#0196|[CodePen](https://codepen.io/lai-weihan/pen/jOKLNxY)|
|Yishan#4902|[CodePen](https://codepen.io/gdjrehhw-the-animator/pen/poKrooO?editors=0010)|
|Cookie SSS#6991|[CodePen](https://codepen.io/sqhjikpa-the-selector/pen/PoaKwyM?editors=1011)|
|大衛#4869|[CodePen](https://codepen.io/exnsrpjc/pen/BaVdyeN)|
| CloThEs#4869 |[Codepen](https://codepen.io/CloThEsZ/pen/eYKENMj)|
|Amberhh#2465|[Codepen](https://codepen.io/Amberhh/pen/vYrZXjM) |
|JustinLiu#9699|[CodePen](https://codepen.io/justin0227/pen/OJEjJdo?editors=0011)|
|mou#2215|[CodePen](https://codepen.io/shihchiehlan/pen/vYrJXZz?editors=1011)|
|Yiru#0236|[Codepen](https://codepen.io/yiru94/pen/gOKxmwQ?editors=1011)|
|竹輪#3335|[Codepen](https://codepen.io/chikuwa0120/pen/ZERJKVM)|
|黑松胖#4836|[Codepen](https://codepen.io/yi-chien-hsieh/pen/mdKMwKq?editors=0012)
|CofCat#9226|[Codepen](https://codepen.io/cofcat456/pen/mdKMMbL?editors=1111)|
|蓁心#6229|[Codepen](https://codepen.io/tlorfrnl-the-typescripter/pen/GRGvdzL?editors=1011)|
|Wei#2330|[Codepen](https://codepen.io/ixfjxrbo-the-typescripter/pen/abKyjQd)|
|Ron Liang#7277|[Codepen](https://codepen.io/ron-go/pen/RwJZYpJ?editors=0011)|
|Yuna Huang#2692|[Codepen](https://codepen.io/Yuna1002/pen/mdKMarK?editors=0011)|
|PoWei#8484|[Codepen](https://codepen.io/harrison-wei-lai/pen/MWXvxEL)|
|hungya#0773|[Codepen](https://codepen.io/hungya777/pen/VwdzRgb?editors=0010)|
|鑫鑫#4346|[CodePen](https://codepen.io/Neil1024/pen/wvXrwdM?editors=1011)|
|SASIMI#5099|[codepen](https://codepen.io/sashimi1327/pen/zYaEOpa)|
|kancheng#3915|[CodePen](https://codepen.io/kancheng/pen/GRGMoQY)|
|安o#2448|[CodePen](https://codepen.io/JzhenAn/pen/MWXOLGp?editors=1111)|
|Tuhacrt#0008|[codepen](https://codepen.io/Tuhacrt/pen/oNyoOPW)|
|yoyo#1003|[codepen](https://codepen.io/pen/NWzwXRL)|
|Baozi#2042|[codepen](https://codepen.io/lillianyu/pen/JjZMerw)|
|Kevin#6131|[codepen](https://codepen.io/xlqjezvc-the-encoder/pen/XWYVLXV?editors=1011)|
|健育#5748|[codepen](https://codepen.io/c1317156/pen/mdKpZpd?editors=1011)|
|pss940909#8650|[codepen](https://codepen.io/pss940909/pen/abKqBNm?editors=1010)|
|yoshidc#0455|[CodePen](https://codepen.io/yoshiyyc/pen/GRGQOPJ)|
|Shuo#1596|[CodePen](https://codepen.io/chiangchungshuo/pen/vYrdjqZ?editors=1011)|
|Paul#7426|[CodePen](https://codepen.io/paul-1997/pen/RwJQJPL?editors=1010)|
|IreneY#0086|[codepen](https://codepen.io/HalfPlannedJourney/pen/yLEvqQz)|
|君Jyun#0147|[codepen](https://codepen.io/Okaybeok/pen/vYrRYLQ?editors=1011)|
|sophiee#7015|[Codepen](https://codepen.io/sophiee2727/pen/yLEvmoq)
|Rena#6249|[Codepen](https://codepen.io/aureate0116/pen/vYrRmvR?editors=0011)|
|Judy Wei#6103|[Codepen](https://codepen.io/Judy0718/pen/VwdxEOz)|
|Ryan Chiang#6649|[Codepen](https://codepen.io/ryanchiang/pen/PoaaKBP?editors=0012)|
|予予#9627|[Codepen](https://codepen.io/kiqzcraa/pen/eYKKXqB?editors=1011)|
|Cliff#4606|[Codepen](https://codepen.io/Cliff_hex/pen/rNKZyBx?editors=0011)|
|yaru#6308|[CodePen](https://codepen.io/lszaietc/pen/dyKdJYy)|
|狸貓#5863|[CodePen](https://codepen.io/tanuki320/pen/eYKLjom?editors=1010)|
|三隻小貓#1905|[CodePen](https://codepen.io/bagelover/pen/wvXRZbE?editors=0011)|
|Mia小福#4473|[codepen](https://codepen.io/a0950271/pen/gOKExJx)|
|阿蘇#8531|[codepen](https://codepen.io/susu3131/pen/MWXNJOd?editors=1111)|
|J_u_d_y#5993|[Codepen](https://codepen.io/J_u_d_y/pen/LYJbrQG?editors=1011)|