Vue - Axios异步通信

一、什么是Axios

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

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

二、为什么要使用 Axios

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

三、Axios 应用

咱们开发的接口大部分都是采用 JSON 格式，可以先在项目里模拟一段 JSON 数据，数据内容如下：创建一个名为 data.json 的文件并填入上面的内容，放在项目的根目录下

{
  "name": "Lam",
  "blog": "https://www.cnblogs.com/Dm920/",
  "address": {
    "city": "深圳",
    "province": "广东",
    "country": "中国"
  },
  "links": [
    {
      "name": "zhengwangzw",
      "url": "https://blog.csdn.net/zhengwangzw/article/details/105760996"
    },
    {
      "name": "牛客",
      "url": "https://www.nowcoder.com/"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

测试代码：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
    <head>
        <mate charset="UTF-8"></mate>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title</title>
        <!--1.CDN导入Vue.js、axios-->
        <script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    </head>
    <body>
        <div id="app">
            <div>
                名称：{{info.name}}
            </div>
            <div>
                博客：
                <a :href="info.blog">{{info.blog}}</a>
            </div>
            <div>
                地址：{{info.address.country}}-{{info.address.province}}-{{info.address.city}}
            </div>
            <div>
                链接：
                <ul v-for="item in info.links">
                    <li>{{item.name}} - {{item.url}}</li>
                </ul>
            </div>
        </div>

        <script>
            var vm = new Vue({
                el: "#app",
                /* data函数：变量只在当前组件中生效，不会影响其他组件 */
                data() {
                    return {
                        /* 定义请求所返回的格式，必须和json保持一致 */
                        info: {name: null, blog: null, address: {}, links: []}
                    }
                },
                mounted() { // 钩子函数，链式编程
                    axios.get('../data.json')
                        .then(response => {this.info = response.data;});
                }
            });
        </script>

    </body>
</html>

说明：

在这里使用了 v-bind 将 a:href 的属性值与 Vue 实例中的数据进行绑定
使用 axios 框架的 get 方法请求 AJAX 并自动将数据封装进了 Vue 实例的数据对象中
我们在 data 函数中的数据结构必须要和 Ajax 响应回来的数据格式匹配！

测试结果：

四、Vue生命周期

👉 官方文档

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

在 Vue 的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册 JS 方法，可以让我们用自己注册的 JS 方法控制整个大局，在这些事件响应方法中的 this 直接指向的是 Vue 的实例。

Lifecycle hooks

每个 Vue 实例在被创建之前都要经过一系列的初始化过程，这个过程就是 vue 的生命周期。

从上图可以看到在 vue 的生命周期中会有很多钩子函数提供给我们在 vue 生命周期不同的时刻进行操作。

下面来一波代码，在浏览器运行，打开 console 查看各个钩子函数的运行

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
    <head>
        <mate charset="UTF-8"></mate>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title</title>
        <!--1.CDN导入Vue.js、axios-->
        <script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    </head>
    <body>
        <div id="app">
            {{message}}
        </div>

        <script>
            var vm = new Vue({
                    el: "#app",
                    data: {
                        message: "Hello Vue",
                    },
                    beforeCreate() {
                        console.group('%c------beforeCreate创建前状态------', 'color:blue');
                        console.log("%cthis.el      = " + this.$el, 'color:blue');      // undefined
                        console.log("%cthis.data    = " + this.data, 'color:blue');     // undefined
                        console.log("%cthis.message = " + this.message, 'color:blue');  // undefined
                    },
                    created() {
                        console.group('%c------created创建完毕状态------', 'color:green');
                        console.log("%cthis.el      = " + this.$el, 'color:green');      // undefined
                        console.log("%cthis.data    = " + this.data, 'color:green');     // 已被初始化
                        console.log("%cthis.message = " + this.message, 'color:green');  // 已被初始化
                    },
                    beforeMount() {
                        console.group('%c------beforeMount挂载前状态------', 'color:blue');
                        console.log("%cthis.el      = " + this.$el, 'color:blue');      // 已被初始化
                        console.log(this.$el);
                        console.log("%cthis.data    = " + this.data, 'color:blue');     // 已被初始化
                        console.log("%cthis.message = " + this.message, 'color:blue');  // 已被初始化
                    },
                    mounted() {
                        console.group('%c------Mounted挂载结束状态------', 'color:green');
                        console.log("%cthis.el      = " + this.$el, 'color:green');     // 已被初始化
                        console.log(this.$el);
                        console.log("%cthis.data    = " + this.data, 'color:green');    // 已被初始化
                        console.log("%cthis.message = " + this.message, 'color:green'); // 已被初始化
                    },
                    beforeUpdate() {
                        console.group('%c------beforeUpdate更新前状态------', 'color:blue');
                        console.log("%cthis.el      = " + this.$el, 'color:blue');      // 已被初始化
                        console.log(this.$el);
                        console.log("%cthis.data    = " + this.data, 'color:blue');     // 已被初始化
                        console.log("%cthis.message = " + this.message, 'color:blue');  // 已被初始化
                    },
                    updated() {
                        console.group('%c------updated更新后状态------', 'color:green');
                        console.log("%cthis.el      = " + this.$el, 'color:green');     // 已被初始化
                        console.log(this.$el);
                        console.log("%cthis.data    = " + this.data, 'color:green');    // 已被初始化
                        console.log("%cthis.message = " + this.message, 'color:green'); // 已被初始化
                    },
                    beforeDisable() {
                        console.group('%c------beforeDisable销毁前状态------', 'color:blue');
                        console.log("%cthis.el      = " + this.$el, 'color:blue');      // 已被初始化
                        console.log(this.$el);
                        console.log("%cthis.data    = " + this.data, 'color:blue');     // 已被初始化
                        console.log("%cthis.message = " + this.message, 'color:blue');  // 已被初始化

                    },
                    disabled() {
                        console.group('%c------disabled销毁完成状态------', 'color:green');
                        console.log("%cthis.el      = " + this.$el, 'color:green');      // 已被初始化
                        console.log(this.$el);
                        console.log("%cthis.data    = " + this.data, 'color:green');     // 已被初始化
                        console.log("%cthis.message = " + this.message, 'color:green');  // 已被初始化
                    },

                });
        </script>
    </body>
</html>

运行结果：

posted @ 2021-03-03 00:52 ohmok 阅读(121) 评论(0) 收藏举报

刷新页面返回顶部

OHMOK.

当你知道的越多,不知道的也就越多