1.什么是Axios

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

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

2.为什么要使用Axios

　　由于 Vue.js 是一个视图层框架并且作者（尤雨溪）严格准守 SoC （关注度分离原则），所以 Vue.js 并不包含 AJAX 的通信功能，为了解决通信问题，作者单独开发了一个名为 vue-resource的插件，不过在进入 2.0 版本以后停止了对该插件的维护并推荐了 Axios 框架。少用jQuery，因为它操作Dom太频繁！

3.第一个Axios应用程序

1.模拟JSON数据：创建data.json

             1
            {

             2
              "name": "第一个Axios程序",

             3
              "url": "https://www.cnblogs.com/zhihaospace/p/12078861.html",

             4
              "page": 1,

             5
              "isNonProfit": true,

             6
              "address": {

             7
                "street": "科大南区",

             8
                "city": "安徽",

             9
                "country": "中国"

            10
              },

            11
              "links": [

            12
                {

            13
                  "name": "海恋天",

            14
                  "url": "https://www.cnblogs.com/zhihaospace/"

            15
                },

            16
                {

            17
                  "name": "Vue的组件",

            18
                  "url": "https://www.cnblogs.com/zhihaospace/p/12078835.html"

            19
                },

            20
                {

            21
                  "name": "Vue的双向绑定",

            22
                  "url": "https://www.cnblogs.com/zhihaospace/p/12078708.html"

            23
                }

            24
              ]

            25 }

2.导入axios.js

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

3.代码

说明：

data函数：与data属性不同，返回数据给视图。注意：data函数返回的数据结构必须要和Ajax响应回来的数据格式相匹配，也就是名字相同
mounted函数：钩子函数
axios：使用axios框架的get方法请求AJAX并自动将数据封装进Vue实例的数据对象中
v-cloak：让渲染时显示模版改为显示空白页面，解决页面闪烁问题
v-text：本身没有闪烁问题

             1
            <!
            DOCTYPE html
            >
             2
            <
            html 
            lang
            ="en"
             xmlns:v-bind
            ="http://www.w3.org/1999/xhtml"
            >
             3
            <
            head
            >
             4
            <
            meta 
            charset
            ="UTF-8"
            >
             5
            <
            title
            >Title</title> 6<!--v-cloak 解决闪烁问题--> 7<style> 8        [v-cloak] { 9            display: none;10}11</style>12</head>13<body>14<!--view层模块-->15<div id="vue">1617<!--默认v-text 是没有闪烁问题的，会覆盖标签的元素中原本的内容，插值表达式只会替换占位符的内容，不会覆盖原来的内容-->18<div v-text="info.url"></div>1920<!--v-cloak：防止闪烁-->21<div v-cloak>名称：{{info.name}}</div>22<div v-cloak>地址：{{info.address.country}}-{{info.address.city}}-{{info.address.street}}</div>23<div v-cloak>链接：<a v-bind:href="info.url" target="_blank" v-cloak>{{info.url}}</a></div>2425</div>2627<!--导入Vue.js-->28<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>29<script src="https://unpkg.com/axios/dist/axios.min.js"></script>30<script type="text/javascript">3132//定义一个Vue组件33    Vue.component("first_component", {
34        props: ["com"],
35        template: "<li>{{com}}</li>"36    })
3738    let vm =new Vue({
39        el: ‘#vue‘,
4041//此处是data函数和data属性不同42        data() {
43return {
44                info: {
45                    name: null,
46                    address: {
47                        country: null,
48                        city: null,
49                        street: null50                    },
51                    url: null52                }
53            }
54        },
55        mounted() { //钩子函数，链式编程，ES6的lambda56            axios
57                .get(‘../data.json‘)
58                .then(response => (this.info = response.data));
59        }
6061    });
62</script>63</body>64</html>

4.Vue的生命周期

官方文档：https://cn.vuejs.org/v2/guide/instance.html#生命周期图示
Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载 DOM、渲染→更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程，就是生命周期。
在 Vue 的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册 JS 方法，可以让我们用自己注册的 JS 方法控制整个大局，在这些事件响应方法中的 this 直接指向的是 Vue 的实例。

技术分享图片

原文：https://www.cnblogs.com/zhihaospace/p/12078861.html

【说明】：本文章由站长整理发布，文章内容不代表本站观点，如文中有侵权行为，请与本站客服联系(QQ:254677821)！

6.Vue的Axios异步通信