Axios通信

Axios介绍

Axios是一个开源的、可以用在浏览器或者NodeJS上的异步通信框架，主要作用就是实现Ajax异步通信。其功能特点如下：

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API(JS中链式编程)
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF (跨站请求伪造)

为何要使用 Axios

由于 Axios 是一个视图层框架，且严格遵守 SOC （关注度分离原则），所以并不包含 Ajax 的通信功能，因此推荐使用 Axios 框架。少用 jQuery, 因为操作 DOM 太频繁。

vue周期

vue有一个完整的生命周期，也就是从开始创建、初始化数据、编译模版、挂载 DOM、渲染 – 更新 – 渲染、卸载等一系列过程。通俗说就是 vue实例从创建到销毁的过程，称为 vue 的生命周期。

vue-life

Axios异步通信实现

<!DOCTYPE html>
<html lang="en" xmlns:href="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

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

</head>
<body>


<div id="vue" v-clock>
    <div>{{info.name}}</div>
    <div>{{info.address.city}}</div>
    <a v-bind:href="info.url">跳转</a>
</div>


<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({

       el: '#vue',

        //data() 方法
        data(){
           return {
               //请求返回的参数格式，必须和json中格式一样
                info: {
                    name: null,
                    address: {
                        street: null,
                        city: null,
                        country: null
                    },
                    url: null
                }
           }
        },

        mounted(){  //钩子函数 链式编程： ES6 新特性
            axios.get('data.json').then(response => (this.info=response.data));
        }
    });
</script>


</body>
</html>