Vue：5.Axios异步通信

2020-03-21 阅读量

5.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.ajax()，但是少用jQuery，因为它操作Dom太频繁！

第一个 Axios 应用程序

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

{
  "name": "博客",
  "url": "https://takento.github.io/",
  "page": 1,
  "isNonProfit": true,
  "address": {
     "street": "二仙桥",
     "city": "北京",
     "country": "中国"
  },
  "links": [
    {
       "name": "bilibili",
       "url": "https://www.bilibili.com/"
    },
    {
       "name": "博客",
       "url": "https://takento.github.io/"
    },
    {
       "name": "百度",
       "url": "https://www.baidu.com/"
    }
  ]
}

测试代码

<head>
    <meta charset="UTF-8">
    <title>Test</title>
    
    <!--引入 JS 文件-->
    <script src="vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

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

<!--body标签里的内容-->

<div id="vue" v-cloak>
    <!--获取info对象里的数据（info里的内容是钩子函数填充的）-->
    <div>名称：{{info.name}}</div>
    <div>地址：{{info.address.country}}-{{info.address.city}}-{{info.address.street}}</div>
    <div>链接：<a v-bind:href="info.url" target="_blank">{{info.url}}</a> </div>
    <!--data.json里links数组的内容，试着加上去-->
</div>

<script>
    var vm = new Vue({
        el: '#vue',
        data() {  //这里要用data()方法，与data属性有区别
            return { //里面主要是摆格式
                info: {
                    name: null,
                    address: {
                        country: null,
                        city: null,
                        street: null
                    },
                    url: null
                }
            }
        },
        mounted() { //钩子函数
            //链式编程：get请求.( 响应=>(info对象=响应的数据) )
            axios.get('data.json').then(response => (this.info = response.data));
        }
    });
</script>

浏览器显示结果如下：

1
2
3

名称：博客
地址：中国-北京-二仙桥
链接：https://takento.github.io/

说明:

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

Vue的生命周期

官方文档：

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