Vue：Axios异步通信

什么是axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

Axios特性

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF

案例

<!--第一步引入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--引入axios.js-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

• json数据

{
	"code": 0,
	"msg": "",
	"count": 15,
	"data": [
		{
			"logId": "1",
			"url": "https://gitee.com/layuicms/layuicms2.0",
			"method" : "GET",
			"ip": "192.169.39.11",
			"timeConsuming":"125",
			"isAbnormal": "正常",
			"operator": "驊驊龔頾",
			"operatingTime": "2017-04-14 00:00:00"
		},
		{
			"logId": "2",
			"url": "https://gitee.com/layuicms/layuicms2.0",
			"method" : "POST",
			"ip": "192.169.39.11",
			"timeConsuming":"89",
			"isAbnormal": "异常",
			"operator": "驊驊龔頾",
			"operatingTime": "2017-04-14 00:00:00"
		},
		{
			"logId": "3",
			"url": "https://gitee.com/layuicms/layuicms2.0",
			"method" : "GET",
			"ip": "192.169.39.11",
			"timeConsuming":"125",
			"isAbnormal": "正常",
			"operator": "admin",
			"operatingTime": "2017-04-14 00:00:00"
		}
	]
}

• 请求json数据

<script>
    /*第二步创建Vue并绑定对象*/
    var vm=new Vue({
        el:"#app",
        /*Model层 ：数据*/

        /*注意：data属性和data方法不一样*/
      /*  data:{
            message:'Vue hello!',

        }*/
      data(){  /*返回json的数据内容*/
          return{
              info:{
                  count:null,
                  data:[{
                      logId:null,
                      url:null,
                      method:null,
                      ip:null,
                      timeConsuming:null,
                      isAbnormal:null
                  }]
              }
          }
      },
        mounted(){  /*请求json数据*/
            axios.get('../logs.json').then(response=>(this.info=response.data));
        }
    });
</script>

• 渲染数据

<div id="app" v-clock>
    {{info.count}}<!--//取单个值-->
    <li v-for="item in info.data"><!--取数组对象的值-->
        {{item.logId}}
        <a v-bind:href="item.url">点击</a><!--使用v-bind绑定数据赋值-->
        {{item.method}}
        {{item.ip}}
        {{item.timeConsuming}}
    </li>

</div>

• 解决模板闪烁问题：

<!--v-clock解决闪烁问题-->
<style>
    [v-clock]{
        display: none;
    }
</style>

截图：