---
tags: JS 直播班 - 2023 秋季班
---
# 🏅 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 / 答案 |
|:---------------:|:----------------------------------------------------------------:|
| 詹姆士 | [CodePen](https://codepen.io/z111048/pen/WNPzwVx) |
| pinyi_9 | [CodePen](https://codepen.io/Wpypy/pen/dyamMxw?editors=1011) |
| damon0323 | [CodePen](https://codepen.io/swk9eny2/pen/eYxMzme?editors=1011) |
| kawa | [CodePen](https://codepen.io/z83xji6/pen/rNPdLOJ?editors=1010) |
| 銀光菇 | [CodePen](https://codepen.io/genesynthesis/pen/xxMWOZa) |
| 精靈 | [CodePen](https://codepen.io/justafairy/pen/LYqdZOo) |
| 維哲 | [CodePen](https://codepen.io/kwz1202/pen/mdvxENO) |
| shuuu | [CodePen](https://codepen.io/afjrvjzl-the-bashful/pen/YzBaGXW?editors=0011) |
| Eden |[Codepen](https://codepen.io/iseden/pen/poGLbLa)|
|CPing|[Codepen](https://codepen.io/CPing/pen/MWLVjmR)|
|yuling|[Coedpen](https://codepen.io/igzdflpu/pen/ExrEgEV)|
| cest_jessie | [CodePen](https://codepen.io/itsjessiechen/pen/BaMrKPB) |
| 依依 | [CodePen](https://codepen.io/Rita-Yang/pen/dyampBV?editors=1010) |
| yuan! | [CodePen](https://codepen.io/townyuan/pen/ZEwxpPY) |
| ⭐️小正 | [CodePen](https://codepen.io/colorgolden/pen/MWLVjMY?editors=1111) |
| dora | [CodePen](https://codepen.io/dorayu/pen/oNmqYgG?editors=1011) |
| yuan2781 | [CodePen](https://codepen.io/ismebir/pen/jOdzVOg) |
| Alyce | [CodePen](https://codepen.io/alycehwy/pen/GRzxNjY?editors=0010) |
| lychee_kk | [CodePen](https://codepen.io/kakakala/pen/KKJoNzK) |
|Moreene|[CodePen](https://codepen.io/Moreene/pen/eYxMBvd)|
|stone4584|[CodePen](https://codepen.io/Royen0506/pen/GRzxNBL)|
| xin | [CodePen](https://codepen.io/Estherrrrrr999/pen/VwgXmEE) |
| Chia Pin | [CodePen](https://codepen.io/joker-cat/pen/bGzvBQN) |
| claire | [CodePen](https://codepen.io/yi-wen-chen/pen/XWOENye) |
| Uli | [CodePen](https://codepen.io/uli1313/pen/VwgXPvN?editors=0011) |
| Winnie | [CodePen](https://codepen.io/codepen-io-winnie/pen/zYeWwEw?editors=1011) |
| ChrisSQR | [CodePen](https://codepen.io/ChrisSQR/pen/MWLVmdm) |
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/zYeWzBj?editors=1111) |
| kuanju27| [CodePen](https://codepen.io/Eero-Chiao/pen/yLZKXoP) |
| celinelinnn |[CodePen](https://codepen.io/celinephoebe/pen/abXYwLQ)|
| tanuki5863 | [CodePen](https://codepen.io/tanuki320/pen/eYxMGJJ?editors=1011) |
| 奔跑吧(GTR150) | [CodePen](https://codepen.io/z111048/pen/WNPzwVx) |
| Yijing | [CodePen](https://codepen.io/Yi-Jing-71080635/pen/qBgoVjg?editors=1111) |
| yu.t_liu | [CodePen](https://codepen.io/YuT200053/pen/dyamZjb?editors=0010) |
| SHUO | [CodePen](https://codepen.io/xrzarxkl-the-reactor/pen/gOqvZqj?editors=1111) |
| ann6212 | [CodePen](https://codepen.io/yqmegupa-the-styleful/pen/RwvMQry?editors=1010) |
| Helen | [CodePen](https://codepen.io/milkteamonster/pen/rNPdKKy?editors=1011) |
| JUNEW | [CodePen](https://codepen.io/June-W/pen/GRzxwWR) |
| Peng | [CodePen](https://codepen.io/H-Peng/pen/poGLBgZ?editors=1010) |
| runweiting | [CodePen](https://codepen.io/weiting14/pen/qBgRExa) |
| 郭芙蘭#6374| [CodePen](https://codepen.io/flora_Kuo/pen/yLZjBym?editors=1011) |
| 風羽 | [CodePen](https://codepen.io/Joy-Huang/pen/rNPvVBa?editors=1010) |
| Ataraxia | [CodePen](https://codepen.io/ataraxia8888/pen/zYePEoa) |
| Rogan | [CodePen](https://codepen.io/pen/?editors=1010) |
| Mattie | [CodePen](https://codepen.io/mattielin/pen/YzBLNyd) |
| RX00 | [CodePen](https://codepen.io/llqzknqv-the-styleful/pen/RwvyZeV?editors=1011) |
| Jerry | [CodePen](https://codepen.io/ildkosxk-the-encoder/pen/MWLGrjB) |
| yaoling.liang |[CodePen](https://codepen.io/Yao-Ling-L-/pen/vYbjrKW)|
| Lainie |[CodePen](https://codepen.io/Lainie88/pen/wvNjXgQ?editors=1010)|
| 保羅 |[CodePen](https://codepen.io/paul-1997/pen/xxMzVjg?editors=1010)|
| 小夏 |[CodePen](https://codepen.io/michaelhsia/pen/KKJerMp)|
| xuan |[CodePen](https://codepen.io/xuan0915/pen/rNPKoad?editors=1011)|
| MY |[CodePen](https://codepen.io/ahmomoz/pen/VwgdqXY)|
| santu0868 |[CodePen](https://codepen.io/HatsumiSan/pen/yLZEdNN?editors=1111)|
| Ching |[CodePen](https://codepen.io/tzuchingg/pen/yLZqyEj?editors=1010)|
| Oira |[CodePen](https://codepen.io/kajing/pen/PoVBjev?editors=1011)|
| gebyman |[CodePen](https://codepen.io/gebyman/pen/MWLBxGe?editors=1010)|
| nini1202desu |[CodePen](https://codepen.io/tvxq5206/pen/JjxBqzK?editors=1010)|
| hsu0921 |[CodePen](https://codepen.io/HSUANIN0327/pen/KKJxMgO)|
| bf_tsai |[CodePen](https://codepen.io/BF-Tsai/pen/abXaZrV?editors=0010)|
| macihuang |[CodePen](https://codepen.io/macy1215/pen/vYbzXoO)|
| NathanJames|[CodePen](https://codepen.io/ufo060204/pen/abXRdGG)|
| Rochel |[Codepen](https://codepen.io/rochelwang1205/pen/abXRqXe?editors=1111)|
| 歐陽龍龍#1061 |[Codepen](https://codepen.io/dizzydog-rgb/pen/WNPaqWW)|
| skypassion5000 |[Codepen](https://codepen.io/skypassion5000/pen/YzBJmbM?editors=1011)|
| davidtt |[Codepen](https://codepen.io/David-Tsai/pen/qBgQpXV?editors=0010)|
| Daylily |[Codepen](https://codepen.io/daylily/pen/wvNQZBQ)|
| Andy |[Codepen](https://codepen.io/andy31342/pen/poGqero?editors=1011)|
|阿榮|[Codepen](https://codepen.io/codeitaday/pen/RwvvKWN)|
|sponge|[Codepen](https://codepen.io/biunpujm-the-flexboxer/pen/dyaaEVj)|
| 辣椒 | [Codepen](https://codepen.io/chilichen118/pen/qBgvOrv) |