---
tags: JS 直播班 - 2022 秋季班
---
# 🏅 Day 32 - 函式設計處理非同步

### 題目

1. 執行以下程式，請問 console.log 的顯示順序為何？

HTML

    <p class="title"></p>

JS

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

    function renderData() {
      console.log(arr);  // 順序 ?
    }

    console.log(arr);  // 順序 ?

2. 承上題，如果希望加入以下 JS，讓 class 為 title 的 p 標籤可以正常的呈現「王小名」這三個字，則應該將以下 JS 填入區間 1 還是區間 2 ?

    const title = document.querySelector('.title');
    title.textContent = arr[0].name;

填入區間

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

    function renderData() {
      console.log(arr); 
      // 區間 1
    }

    console.log(arr); 
     // 區間 2

## 回報流程

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


<!-- 解答：

1. 執行順序如下：

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

function renderData() {
  console.log(arr);  // 順序 3
}

console.log(arr);  // 順序 1

2. 填入區間 1

-->

回報區
---

| Discord | CodePen / 答案 |
|:---------------:|:----------------------------------------------------------------:|
| YC#2522 | [CodePen](https://codepen.io/YCLu/pen/ZERyLoY) |
| AuroraC#6539 | [codepen](https://codepen.io/AuroraC/pen/BaVZgxP) |
| yumy#1940 | [CodePen](https://codepen.io/yumyyang/pen/qBKjzjN) |
| hsiung阿熊#4079 | [Codepen](https://codepen.io/hsiungchi/pen/RwJgzex) |
| 法希娜#3206 | [Codepen](https://codepen.io/yiiserpf-the-encoder/pen/LYrLKXy) |
| 薯餅#3581 | [Codepen](https://codepen.io/ColdingPoTaTo/pen/MWXoMxW) |
| 威爾#1694 | [CodePen](https://codepen.io/WILL_Wu/pen/ZERydZG) |
| jimmyFang#9575 | [CodePen](https://codepen.io/pohxiqqo/pen/RwJgzzy?editors=0010) |
| kenki100#0068 | [Codepen](https://codepen.io/ken100/pen/JjZJQQN) |
| Clara#1275 | [Codepen](https://codepen.io/bsupixqu/pen/jOKwgNg?editors=1010) |
| 柔柔#1716 | [Codepen](https://codepen.io/rouchen/pen/BaVZXyM?editors=1011) |
| LHchien33#6232 | [Codepen](https://codepen.io/lin_chien/pen/abKwggp?editors=1010) |
| 圈圈#4060 | [codepen](https://codepen.io/wjejfczn-the-bold/pen/zYazgOK) |
| 末次#0236 | [codepen](https://codepen.io/yunjulee/pen/dyKRxYd) |
| m_m#5493 | [CodePen](https://codepen.io/minnn7716/pen/KKeqOzw) |
| 楓之聲#6945 | [Codepen](https://codepen.io/sshane258/pen/KKeqOqd) |
| JackC#0411 | [Codepen](https://codepen.io/key0329/pen/poKwMwg) |
| Rr#2215 | [Codepen](https://codepen.io/rufangcheng/pen/YzvQmvR) |
| amy芳#1385 | [Codepen](https://codepen.io/amy-chieng/pen/ZERygmy) |
|勁辣雞腿寶#5817|[Codepen](https://codepen.io/orz311013/pen/QWxgeJN?editors=0010)|
|黑白兔#0684|[Codepen](https://codepen.io/johnny329/pen/BaVZXEN)|
|yawun#0042|[CodePen](https://codepen.io/monicalin/pen/VwdWooR)|
|Peng#9811|[Codepen](https://codepen.io/peng-027/pen/VwdzZaO)|
|Benson#6763|[Codepen](https://codepen.io/kumashow/pen/gOKxYLa)|
|albee#9121|[Codepen](https://codepen.io/albee-chang/pen/oNyevYO?editors=1011)|
|軟綿綿 (๑•ᴗ•๑) ♡#3627|[CodePen](https://codepen.io/Connie-Chien/pen/NWzvKjp?editors=0010)|
|KC_8685#9343|[Codepen](https://codepen.io/cathy7411/pen/BaVdBdQ)|
|Hilda#7085|[Codepen](https://codepen.io/vwquikad-the-vuer/pen/zYadYYV)|
|PayRoom#8328|[CodePen](https://codepen.io/water38198/pen/ExRvxZx)|
|Yishan#4902|[CodePen](https://codepen.io/gdjrehhw-the-animator/pen/mdKMdOw?editors=1010)|
|Loran#1105|[CodePen](https://codepen.io/loranlin/pen/vYrJYxm)|
|Ruby Chen#7452|[Codepen](https://codepen.io/ruby92429/pen/JjZyjjj?editors=1011)|
|hannahTW#2224|[Codepen](https://codepen.io/hangineer/pen/poKroKm?editors=1111)|
|威0#6919|[Codepen](https://codepen.io/n0918679182/pen/PoaKoMy?editors=0011)|
|Potatolee#7749|[Codepen](https://codepen.io/potatoleee/pen/xxzLbbd?editors=1010)|
|masterYan#2480|[Codepen](https://codepen.io/htzwgoqt-the-looper/pen/MWXvYWw)|
|Kimi #9564|[CodePen](https://codepen.io/kimihu91/pen/KKeqoMb)|
|RJRS#9430|[CodePen](https://codepen.io/RJRS/pen/LYrjERe)|
|shinyhung#3825|[CodePen](https://codepen.io/sean_1215/pen/XWYgLoX?editors=1010)|
|Data#9297|[CodePen](https://codepen.io/kirakira72/pen/qBKXEPx)|
|Lucie#3831|[Codepen](https://codepen.io/bisespei/pen/poKwXxX)|
|Winnie#1306|[Codepen](https://codepen.io/WinnieWuWinnie/pen/LYrjVNq?editors=1010)|
|大衛#4869|[Codepen](https://codepen.io/exnsrpjc/pen/PoaKqzP)|
| CloThEs#4869 |[Codepen](https://codepen.io/CloThEsZ/pen/XWYabEx)|
| 小白#2406 | [CodePen](https://codepen.io/gracewhite/pen/QWxGBEy) |
|jacky010080#0880|[CodePen](https://codepen.io/Yen-Jung-Chen/pen/VwdzLVL?editors=1011)|
|心幻羽#0056|[CodePen](https://codepen.io/linglingsyu/pen/ZERJbzV)|
|kuku#3118|[Codepen](https://codepen.io/mengting-ku/pen/ZERJbLZ)
|Eileen#6454|[Codepen](https://codepen.io/Eileen-io/pen/qBKXObd)
|mandylai#4055|[Codepen](https://codepen.io/mandy-lai-2/pen/NWzvGzE?editors=1011)
|出事了阿伯#9923|[Codepen](https://codepen.io/BradpittLai/pen/wvXqMBN?editors=1010)
|Cream#3449|[Codepen](https://codepen.io/frxdwbbi-the-sasster/pen/abKyddJ?editors=1011)
|William Lai#0196|[Codepen](https://codepen.io/lai-weihan/pen/dyKzGmj)
|雷雷#7844|[Codepen](https://codepen.io/lei-yi-jie/pen/OJEjNPV?editors=1010)|
|Amberhh#2465|[codepen](https://codepen.io/Amberhh/pen/eYKRwLm) |
| azami#5986 |[CodePen](https://codepen.io/azami/pen/QWxMNza)|
|JustinLiu#9699|[CodePen](https://codepen.io/justin0227/pen/eYKEZxQ?editors=0010)|
|jackson204#6363|[CodePen](https://codepen.io/jackson204/pen/RwJZaXG?editors=1111)|
Sentiments#4883|[codepen](https://codepen.io/Sentiments/pen/JjZyKrG?editors=1011)
|mou#2215|[CodePen](https://codepen.io/shihchiehlan/pen/dyKzpBw)|
|Hironaka#7367|[CodePen](https://codepen.io/Hironaka0815/pen/XWYaNRY)|
|bingsu#2362|[Codepen](https://codepen.io/pmyfr/pen/MWXvpYw?editors=0010)|
|Cookie SSS#6991|[Codepen](https://codepen.io/sqhjikpa-the-selector/pen/RwJZpMq?editors=1112)|
|肉桂卷#0625|[Codepen](https://codepen.io/ginnlee/pen/qBKXrpx?editors=1011)|
|Yiru#0236|[Codepen](https://codepen.io/yiru94/pen/abKyJeG?editors=1011)|
|竹輪#3335|[Codepen](https://codepen.io/chikuwa0120/pen/yLEobrE)|
|黑松胖#4836|[Codepen](https://codepen.io/yi-chien-hsieh/pen/JjZyJqE?editors=0011)
|CofCat#9226|[Codepen](https://codepen.io/cofcat456/pen/PoaKKqy)|
|Mylène#2481|[Codepen](https://codepen.io/hamajibashi/pen/eYKGwQo)|
|suihsilan#9485|[Codepen](https://codepen.io/suihsilan/pen/ZERJvOQ?editors=0010)|
|蓁心#6229|[Codepen](https://codepen.io/tlorfrnl-the-typescripter/pen/MWXvGNm?editors=1111)|
|Jill#5577| [CodePen](https://codepen.io/Jillkate/pen/XWYaYVB)|
|Wei#2330|[Codepen](https://codepen.io/ixfjxrbo-the-typescripter/pen/KKevBJY)|
|charlottelee849#0366|[Codepen](https://codepen.io/charlotte-lee/pen/GRGvwGM?editors=0011)|
|WEI_RIO#9342|[Codepen](https://codepen.io/wei_wu/pen/MWXvLwm?editors=0011)|
|Yuna Huang#2692|[Codepen](https://codepen.io/Yuna1002/pen/mdKMaoo?editors=1011)|
|banazita#5143|[CodePen](https://codepen.io/banazita/pen/zYadeNj?editors=1111)|
|PoWei#8484|[CodePen](https://codepen.io/harrison-wei-lai/pen/QWxMoym?editors=1111)|
|beta lin#1445|[CodePen](https://codepen.io/linbeta/pen/abKyxBp)|
|無名#6427|[CodePen](https://codepen.io/Nomoney/pen/xxzLvQP)|
|SASIMI#5099|[codepen](https://codepen.io/sashimi1327/pen/NWzaGRX)|
|kancheng#3915|[CodePen](https://codepen.io/kancheng/pen/poKWgZj)|
|Ron Liang#7277|[CodePen](https://codepen.io/ron-go/pen/GRGMMao)|
|hungya#0773|[CodePen](https://codepen.io/hungya777/pen/qBKPxOY?editors=0011)|
|shio#1414|[CodePen](https://codepen.io/shioyen/pen/PoaJxyJ)|
|Hazel.#6020|[CodePen](https://codepen.io/Hazelhsieh/pen/LYrOGoO?editors=1111)|
|安o#2448|[CodePen](https://codepen.io/JzhenAn/pen/MWXOLdv?editors=1111)|
|Tuhacrt#0008|[codepen](https://codepen.io/Tuhacrt/pen/oNyoOPW)|
|yoyo#1003|[CodePen](https://codepen.io/pen/Vwdrorb?editors=1111)|
|Silvialu#4521|[CodePen](https://codepen.io/Silvia091640/pen/RwJZOgJ)|
|我是泇吟#5189|[CodePen](https://codepen.io/kljuqbxs/pen/qBKprGr)|
|Baozi#2042|[CodePen](https://codepen.io/lillianyu/pen/zYapMRJ)|
|健育#5748|[CodePen](https://codepen.io/c1317156/pen/oNyprJK)|
|pss940909#8650|[CodePen](https://codepen.io/pss940909/pen/yLEvVVB)|
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/oNyEZej?editors=0010) |
| yoshidc#0455 | [CodePen](https://codepen.io/yoshiyyc/pen/yLEvpgq) |
| Shuo#1596 | [CodePen](https://codepen.io/chiangchungshuo/pen/NWzyzYV?editors=1111) |
|IreneY#0086|[codepen](https://codepen.io/HalfPlannedJourney/pen/GRGQBVo)|
| cbs#9007 |[Codepen](https://codepen.io/wasdjk/pen/OJEQoVb)|
| Chung#5951 |[Codepen](https://codepen.io/yuju16/pen/VwdXwdR?editors=0011)|
|君Jyun#0147|[codepen](https://codepen.io/Okaybeok/pen/PoaRqEB?editors=1011)|
sophiee#7015|[Codepen](https://codepen.io/sophiee2727/pen/VwdXLqQ)|
|Paul#7426|[CodePen](https://codepen.io/paul-1997/pen/GRGxZOd?editors=0011)|
|Rena#6249|[Codepen](https://codepen.io/aureate0116/pen/rNKdwaW?editors=1010)
|Kevin#6131|[Codepen](https://codepen.io/xlqjezvc-the-encoder/pen/OJEvoYj?editors=1011)
|YI#0863|[Codepen](https://codepen.io/YI0305/pen/BaVxRZY?editors=0012)|
|Judy Wei#6103|[Codepen](https://codepen.io/Judy0718/pen/OJEZaLo)|
|Ryan Chiang#6649|[Codepen](https://codepen.io/ryanchiang/pen/oNyyeMO)|
|予予#9627|[Codepen](https://codepen.io/kiqzcraa/pen/JjZZVGp?editors=1011)|
|Cliff#4606|[Codepen](https://codepen.io/Cliff_hex/pen/gOKdmbd?editors=1010)|
|yaru#6308|[CodePen](https://codepen.io/lszaietc/pen/wvXypGe)|
|狸貓#5863|[CodePen](https://codepen.io/tanuki320/pen/rNKZZOx?editors=0010)|
|Mia小福#4473|[CodePen](https://codepen.io/a0950271/pen/NWzJaPz)|
|阿蘇#8531|[CodePen](https://codepen.io/susu3131/pen/RwJXKQL?editors=1010)|
|J_u_d_y#5993|[Codepen](https://codepen.io/J_u_d_y/pen/poONZME?editors=1111)|