---
# System prepended metadata

title: "\U0001F3C5 Day 32 - 函式設計處理非同步"
tags: [JS 直播班 - 2024 秋季班]

---

# 🏅 Day 32 - 函式設計處理非同步

### 題目

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

    HTML
    ```htmlembedded=
    <p class="title"></p>
    ```
    JS
    ```javascript=
    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 ?
    ```javascript=
    const title = document.querySelector('.title');
    title.textContent = arr[0].name;
    ```

    填入區間
    ```javascript=
    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 連結貼至底下回報就算完成了喔! 
解答位置請參考下圖（需打開程式碼的部分觀看）

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

<!-- 解答：  

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]() | 
-->

