# 🏅 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

解說：
可以參考昨日作業的概念，
因為 axios 為非同步語法，
會將 axios 先暫存在其他空間等待回應，
等待回應期間會「先」執行 axios 下方的程式碼內容，
故最下方的 console.log(arr); 會先被執行，
接著當 axios 請求成功回應後，
才會再接續執行 .then 內的程式碼。

依據上述說明，
區間 2 的部位是沒有取得到資料的，
使用 api 的資料便需要放在區間 1 的位置才能正確取得。

-->

回報區
---
| # | Discord | CodePen / 答案 |
| --- | ----- | ----- |
| 01 | voke | [CodePen](https://codepen.io/FiSi-the-lessful/pen/NWQYJGK) |
| 02 | Sonia | [CodePen](https://codepen.io/YUJOU/pen/BaXvvom?editors=1010) |
| 03 | 泊岸 | [CodePen](https://codepen.io/qoq77416416/pen/yLmGGPr?editors=1010) |
| 04 | chris | [CodePen](https://codepen.io/chris-chen-the-selector/pen/MWNZZMY?editors=0011) |
| 05 | david1819 | [CodePen](https://codepen.io/David-Lin-the-vuer/pen/YzmddVZ) |
| 06 | 毛巾 | [CodePen](https://codepen.io/bqdcjboa-the-solid/pen/eYqbxmZ) |
| 07 | tim | [CodePen](https://codepen.io/jskrtivy-the-animator/pen/YzmdBpv?editors=1011) |
| 08 | Hedwig | [CodePen](https://codepen.io/adirehfz-the-encoder/pen/mdNavWQ) |
| 09 | 嚼勁先生 | [CodePen](https://codepen.io/James520284/pen/zYgyeRd) |
| 10 | Dolce_墨 | [CodePen](https://codepen.io/DolceTseng1026/pen/OJKrdze) |
| 11 | Ruby | [CodePen](https://codepen.io/xivgaijl-the-selector/pen/WNVLmQo) |
|12|睿睿|[CodePen](https://codepen.io/uwmrsusb-the-solid/pen/dyxwLLz?editors=1010)|
| 13 | Mos |[CodePen](https://codepen.io/mos25399/pen/YzmdbPe?editors=1011)|
| 14 | mercury2508. | [CodePen](https://codepen.io/Mercury2508/pen/zYgyQPz) |
| 15 | yuyuhunter_0509 | [CodePen](https://codepen.io/KRcube/pen/zYgyVay?editors=0011) |
| 16 | Kaya | [CodePen](https://codepen.io/kayaribi/pen/jOgXgBe) |
| 17 | .tsz_ying | [CodePen](https://codepen.io/bekgnohe-the-selector/pen/jOgXjKa?editors=1012) |
| 18 | kun._c8_shake_it | [CodePen](https://codepen.io/barry91205/pen/xxvMxrm) |
| 19 | ycl325.etheddie | [CodePen](https://codepen.io/wdvikfuz-the-selector/pen/wvVNvVr) |
| 20 | yuyeh_1212 | [CodePen](https://codepen.io/yuyeh1212/pen/QWeYwjr) |
| 21 | jimmy.0706 | [CodePen](https://codepen.io/JimmyMao/pen/eYqxmrO?editors=1011) |
| 22 | Ariel | [CodePen](https://codepen.io/ariel0510/pen/qBegdPp?editors=1011) |
| 23 | Rogan | [CodePen](https://chatgpt.com/c/6733579d-9abc-8010-9536-8652681fc50a) |
| 24 | GTR150 | [CodePen](https://codepen.io/Wer-Qwe/pen/ExqrPMK) |
| 25 | JIA | [CodePen](https://codepen.io/nzaicwlw-the-styleful/pen/OJKdXQX?editors=1010) |
| 26 | kaka_945 | [CodePen](https://codepen.io/kay945/pen/OJKdzRj) |
| 27 | 陳小廷 | [CodePen](https://codepen.io/ting1124/pen/mdNvXVL) |
| 28 | 610 | [CodePen](https://codepen.io/YI-LING-LIU/pen/ExqrRLX) |
| 29 | joylu0902 | [CodePen](https://codepen.io/joylu0902/pen/rNXPpeR) |
| 30 | 是在哈囉 | [CodePen](https://codepen.io/miyxdhem-the-solid/pen/yLmZGrW) |
| 31 | Glen_69515 |[codePen](https://codepen.io/glenyaochih/pen/XWvGddm?editors=1111)|
| 32 | ab567ab5 |[codePen](https://codepen.io/WanTzu-Chiang/pen/vYoPyEJ?editors=1011)|
| 33 | Chun | [CodePen](https://codepen.io/Chun_debbie/pen/abeMwLG?editors=1011) |
| 34 | Tatsu | [CodePen](https://codepen.io/chindesu0207/pen/jOgJKoE) |
| 35 | 野鴿 | [CodePen](https://codepen.io/HoshinoSyouta/pen/XWvQdwj?editors=1011) |
| 36 | Mike | [CodePen](https://codepen.io/mike2049/pen/bGXJeJe?editors=1011) |
|37|Hailey|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/WNVWOeV?editors=1011)|
| 38 | jerry_66983 | [CodePen](https://codepen.io/Barry-C/pen/mdNgxQY?editors=1011) |
| 39 | Lotte | [CodePen](https://codepen.io/hmkdoxuj-the-decoder/pen/PoMgvRR?editors=1011) |
| 40 | Celine | [CodePen](https://codepen.io/szuning/pen/NWQJJLr) |
| 41 | ycl325.etheddie | [CodePen](https://codepen.io/wdvikfuz-the-selector/pen/VwoJjVx) |
| 42 | Joannehu | [CodePen](https://codepen.io/nelbabkv-the-flexboxer/pen/OJKYZEX) |
| 43 | Emma | [CodePen](https://codepen.io/Emma0919/pen/abeezGG) |
|44|Amy(咂摳)| [CodePen](https://codepen.io/nnxucgmc-the-builder/pen/WNVVQvg?editors=0011)|
|45|JRz| [CodePen](https://codepen.io/JRZHENG/pen/QWeeyGb?editors=0011)
| 46 | Jack | [CodePen](https://codepen.io/kxbhixte-the-sasster/pen/oNKKLJG?editors=0010) |
| 47 | alec1203 | [CodePen](https://codepen.io/soloayaya/pen/RwXXGdX?editors=1012) |
| 48 | Nocab | [CodePen](https://codepen.io/PeihanWang/pen/WNVVyoj?editors=1011) |
| 49 | 蘑菇星星 | [CodePen](https://codepen.io/brrrieon-the-vuer/pen/raBBywW) |
| 50 | KOMATSU PEI | [CodePen](https://codepen.io/Komatsu2021/pen/gbYYmyN?editors=1011) |
| 51 | Ana | [Codepen](https://codepen.io/Ana-Wu/pen/OPLLjKL?editors=1011) |
| 52 | charlottelee | [Codepen](https://codepen.io/char849/pen/bNbGyGX) |
| 53 | Chuang | [Codepen](https://codepen.io/uidoytjq-the-solid/pen/ogvOjrL?editors=1010) |

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