Axios异步通信

axios是一个开源的可以用在浏览器端和NodeJs的异步通信框架，它的主要作用就是实现ajax异步通信，其功能特点如下：

-- 从浏览器中创建XMLHttpRequests

-- 从node.js创建http请求

-- 支持Promise API

-- 拦截请求和响应

-- 转换请求数据和响应数据

-- 取消请求

-- 自动转换JSON数据

-- 客户端支持防御 XSPF （跨站请求伪造）

中文官网：www.axios-js.com/

在开发的过程中，使用的数据多为json数据；如下：

{
    "name":"admin",
    "sex":"男",
    "address":{
        "street":"广东省",
        "city":"广州市",
        "country":"天河区"
   },
    "links":[
   {
      "name":"QQ",
      "code":"12345678910"
    },
   {
      "name":"微信",
      "code":"12345678910"
   }
    ]
}

要使用Axios异步通信框架，那就得先引入Axios的js文件；

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

若要使用vue,也需要引用vue.js；

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

然后在中使用，如下格式：

var box=new Vue({
    el:'#box',
    data(){
        return{
            info:{
                name:'',
                sex:'',
                address:'',
                links: [
                    {
                        name: '',
                        code:''
                    }
                ]
            }
        }
    },
    mounted(){
        axios
        .get("data.json") //请求路径
        .then(response=>this.info=response.data)
    }
})

然后在html中定义元素，并拿出数据

<div id="box">
   <div>姓名：{{info.name}}</div>
   <div>性别：{{info.sex}}</div>
   <div>地址：{{info.address.street}}{{info.address.city}}{{info.address.country}}</div>
   <ul>
   //使用v-for遍历links
    <li v-for="link in info.links">
        {{link.name}}：{{link.code}}
    </li>
</ul></div>

v-bind: 可以用于绑定属性：

-- 当在没有使用v-bind的时候a标签中的href只能存放字符串形式的路径；

当加上v-bind时，即可以存放属性；

<a v-bind:href="info.url">
//简写
<a :href="info.url">

在vue项目中，使用axios异步通信，同样需要导入axios;

1. 安装axios;

npm install --save axios vue-axios