---
# System prepended metadata

title: JS-AJAX-axios

---

六角體驗營
# JS: AJAX-axios
## 各種發出網路請求的 JS 寫法種類介紹 
1. JS 原生寫法
 * XMLHttpRequest
 * Fetch
2. 套件，需額外載入js
 * axios
 
### 方法1: XMLHttpRequest
```javascript=
//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)
```javascript=
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請求)
```javascript=
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)** 測試是否嵌入成功(如下)
 
   ![](https://hackmd.io/_uploads/S1CIi-lWa.png)

## axios 範例
### 1. 嘗試串接外部資源
```javascript=
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-將外部資料寫入到網頁上
```html=
<h1 class="title"></h1> //要打印在這裡
```

```javascript=
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就會直接執行下一行，因此陣列還是空的(以下範例)
 
 ```js=
let arr=[];
axios.get('https://hexschool.github.io/ajaxHomework/data.json')
  .then(function(response){
    arr = response.data;
    console.log(arr); //[{...}] 這段後執行
    
})
consoel.log(arr);     //[] 空陣列 -> 這段換先執行
 ```
### 4. 透過函式設計處理非同步
> 透過設計渲染函式，確保資料取得才執行的函示
```js=
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); //[]
```