Axios

什么是Axios？

一个可以用在浏览器端和NodeJS的异步通信框架，主要作用就是实现Ajax异步通信。

官方网站：

http://www.axios-js.com

Axios 功能特点

• 从浏览器中创建XMLHttpRequests。
• 从nodejs创建Http请求。
• 支持Promise API
• 拦截请求和响应。
• 转换请求数据和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防御XSRF（跨站请求伪造）

代码实现-显示全部JSON数据

<div id="vue">

</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    var vue = new Vue({
        el: '#vue',
        mounted(){  
            //链式编程：以点的方式连接语句
            axios.get('../data.json').then(Response=>(console.log(Response.data)));
        }
    });
</script>

• mounted()称为钩子函数，类似AOP，可以将一段函数横切进Vue的声明周期。
• 利用类似于Ajax的axios获取JSON数据，然后返回一个响应，响应的内容是JSON的数据。

效果呈现

{name: "恨劫", url: "http://baidu.com", page: "1", isNonProfit: "true", address: {…}, …}
address: {street: "兴发路", city: "辽宁大连", country: "中国"}
isNonProfit: "true"
links: Array(3)
0: {name: "B站", url: "https://www.bilibili.com/"}
1: {name: "4399", url: "https://www.4399.com/"}
2: {name: "百度", url: "https://www.baidu.com/"}
length: 3
__proto__: Array(0)
name: "恨劫"
page: "1"
url: "http://baidu.com"

网络抓包

由此可见：axios 实现的是Ajax的异步通信

代码实现-按照格式部分显示json

<div id="vue">
    <!--{{}}绑定后才能被vue找到-->
    <div>{{info.name}}</div>
    <div>{{info.address}}</div>
    <!--v-bind:绑定后才能被vue找到-->
    <a v-bind:href="info.url">点我</a>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    var vue = new Vue({
        el: '#vue',
        data(){ //是data方法，区别与data属性
            return{
                //请求返回的参数格式，必须和JSON字符串一样，可以不写
                //return的是一个格式，并不是真正的数据
                info:{
                    name: null,
                    url: null,
                    address: {
                        street: null,
                        city: null,
                        country: null
                    }
                }
            }
        },
        mounted(){  //钩子函数，类似AOP，可以横切进vue的声明周期
            //链式编程：以点的方式连接语句
            //获取一个json文件，返回数据给info
            axios.get('../data.json').then(Response=>(this.info = Response.data));
        }
    });
</script>

• 首先通过 axios.get 请求获取json文件，将json数据返回给info。
• data() 方法会将传进来的JSON数据自定义格式后返回
  • 这里返回的参数格式必须和JSON字符串中的key名字一样。
  • 返回的是一个格式，并不是真正的数据。
• 通过对html标签的绑定，来显示json数据。