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

### 題目

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

<!-- 解答：

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 的位置才能正確取得。

-->