Axios

1.基本說明

Axios是一個基于promise的網路請求庫，作用于node.js和瀏覽器中，它是 isomorphic 的 (即同一套代碼可以運行在瀏覽器和node.js中)，在服務端它使用原生node.js http 模塊, 而在客戶端 (瀏覽端) 則使用XMLHttpRequest，
1. axios是獨立于vue的一個專案，不是vue的一部分
2. axios通常和Vue一起使用，實作ajax操作
3. Axios是一個基于promise的HTTP庫
學習檔案：https://javasoho.com/axios/
Axios庫檔案：
1. 使用axios需要引入axios庫檔案
2. 可以直接引入
```
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
```
3. 也可以下載axios.min.js，然后在本地引入
  
  訪問上面的地址，另存為js檔案即可

2.應用實體

在Vue專案中使用axios，從服務器獲取json資料，顯示在頁面

為了簡化，使用json檔案來模擬后端互動的資料

1.response.data.json：

{
  "success": true,
  "message": "成功",
  "data": {
    "items": [
      {
        "name": "牛魔王",
        "age": 800
      },
      {
        "name": "紅孩兒",
        "age": 500
      },
      {
        "name": "蜈蚣精",
        "age": 200
      }
    ]
  }
}

2.在專案中匯入vue.js和axios.min.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios的應用實體</title>
</head>
<body>
<!--頁面視圖-->
<div id="app">
    <h1>{{msg}}</h1>
    <table border="1px" >
        <tr>
            <td>名字</td>
            <td>年齡</td>
        </tr>
        <tr v-for="monster in monsterList">
            <td>{{monster.name}}</td>
            <td>{{monster.age}}</td>
        </tr>
    </table>
</div>
<script src="https://www.cnblogs.com/liyuelian/p/vue.js"></script>
<script src="https://www.cnblogs.com/liyuelian/p/axios.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            msg: "妖怪資訊串列",
            monsterList: []//表示妖怪資訊的陣列
        },
        methods: {//自定義方法
            list() {//發出ajax請求，獲取資料-axios
                /*
                  1.axios.get()表示發出一個ajax請求
                  2."http://localhost:63342/axios/data/response.data.json" 表示請求的url
                     根據實際情況填寫
                  3.axios發出ajax請求的基本語法是
                       axios.get(url).then(箭頭函式).then(箭頭函式)...catch(箭頭函式)
                       (1)如果get請求成功后，就進入第一個then()
                       (2)可以在第一個then()中繼續發出ajax請求（和promise基本一致）
                       (3)如果有例外，會進入到catch(箭頭函式)中處理
                  4.list方法在生命周期函式created()中呼叫比較好
                  （這個階段的data和 methods已經初始化結束，可以訪問，但dom結構未初始化，頁面未渲染）
                 */
                axios.get("http://localhost:63342/axios/data/response.data.json")
                    .then(responseDate => {//如果發出的ajax請求成功后，就會執行then()的箭頭函式
                        // console.log("responseDate=>", responseDate);
                        // console.log("responseDate.data=https://www.cnblogs.com/liyuelian/p/>", responseDate.data);
                        // console.log("responseDate.data.data=https://www.cnblogs.com/liyuelian/p/>", responseDate.data.data);
                        console.log("responseDate.data.data.items=>", responseDate.data.data.items);
                        //將妖怪串列資料資訊，系結到data資料池
                        this.monsterList = responseDate.data.data.items;

                        //可以再次發出ajax請求，和promise一樣,例如：
                        return axios.get("http://localhost:63342/axios/data/response.data.json");
                    }).then(responseData2 => {
                    console.log("第二次axios發出ajax請求回傳資料responseData2=>", responseData2);
                    }).catch(err => {
                    console.log("err=>", err);
                    })//這里可以再次發出
            }
        },
        created() {//list方法在生命周期函式created()中呼叫比較好
            this.list();
        }
    })
</script>
</body>
</html>

responseDate.data.data.items的原生資料格式如下：