六角體驗營
# JS: AJAX-axios
## 各種發出網路請求的 JS 寫法種類介紹
1. JS 原生寫法
* XMLHttpRequest
* Fetch
2. 套件，需額外載入js
* axios

### 方法1: XMLHttpRequest

//5.回傳的函式
function reqListener(){
    console.log(this.responseText);
}

//1.開啟一個新的請求
var oReq = new XMLHttpRequest();     

//4.回傳成功會處發函式
oReq.addEventListner("load",reqListener);

//2.使用get方法取得網址資料
oReq.open("GET","http://www.example.org/example.txt");

//3.送出
oReq.send();

### 方法2: 使用Fetch發送請求(request)

fetch('http://example.com/movies.json')
    .then(function(response){
    return response.json();  //資料回傳後轉碼成json格式
})

.then(function(myJson){ //json解析後的回傳數據
  console.log(myJson);
})

### 方法3: axios
>優點：
>1. 仍是由瀏覽器創建XMLHttpRequest
>2. 可整合後端(可由node.js創建http請求)

axios.get('/user/12345')  //使用get發送請求
    .then(function(response){ //回傳參數數據
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
})

## axios 環境安裝
> [**官方文件(npm, cdn...)**](https://axios-http.com/zh/docs/intro)
> 使用 jsDelivr CDN:

 <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

* 可在JS檔中 **console.log(axios)** 測試是否嵌入成功(如下)


## axios 範例
### 1. 嘗試串接外部資源

axios.get('https://hexschool.github.io/ajaxHomework/data.json')
  .then(function(response){             //引數為接到的資料
    console.log(response);
    console.log(response.data);       //json中的資料[{...}]
    console.log(response.status);     //200 ok取得成功
    console.log(response.statusText); //""
    console.log(response.headers);    //可看到content-type
    console.log(response.config);
})

### 2. axios-將外部資料寫入到網頁上

<h1 class="title"></h1> //要打印在這裡

axios.get('https://hexschool.github.io/ajaxHomework/data.json')
  .then(function(response){
    let arr = response.data;
    //console.log(arr[0].name);
    const title = document.querySelector('.title');
    title.textContent = arr[0].name; 
})

### 3. axios-非同步觀念
> 瀏覽器還沒收到get回傳的response就會直接執行下一行，因此陣列還是空的(以下範例)

let arr=[];
axios.get('https://hexschool.github.io/ajaxHomework/data.json')
  .then(function(response){
    arr = response.data;
    console.log(arr); //[{...}] 這段後執行
    
})
consoel.log(arr);     //[] 空陣列 -> 這段換先執行

### 4. 透過函式設計處理非同步
> 透過設計渲染函式，確保資料取得才執行的函示

let arr=[];
axios.get('https://hexschool.github.io/ajaxHomework/data.json')
  .then(function(response){
    arr = response.data; 
    renderData();        //寫在這裡，取得資料回傳後才執行
})

//函式會在呼叫的axios中被執行，確保已經取得資料執行
function renderData(){ 
    console.log(arr); //[{...}] 
    const title = document.querySelector('.title');
    title.textContent = arr[0].name;
}

console.log(arr); //[]