【Vue】Axios（异步通信）快速入门

一、什么是Axios

Ajax是 Asynchronous JavaScript and XML的缩写，意思是异步网络请求。
其基于promise，用于浏览器和node.js的http客户端。

vue是一个视图层的框架，并且开发者严格遵守 SoC（关注度分离原则），所以vue并没有通信功能。作者推荐使用Axios。要尽量的少用jQuery，因为它有频繁的DOM操作。

---

vue的生命周期：

---

从上图中，我们可以发现在vue的整个生命周期中涉及了8个钩子（红框），对于这8个 钩子，对应的vue中的8个生命周期函数。如下：

钩子函数	触发的行为	在此阶段可以做的事情
beforeCreadted	vue实例的"挂载元素$el"和"数据对象data"都为undefined，还未初始化。	加loading事件
created	vue实例的数据对象data已defined，$el仍然是undefined	结束loading、请求数据为mounted渲染做准备
beforeMount	vue实例的$el和data都初始化了，但还是虚拟的dom节点，具体的data.filter还未替换。	…
mounted	vue实例挂载完成，data.filter成功渲染	可以访问dom，操作dom元素
beforeUpdate	data更新前触发	数据更新前的一些操作
updated	data更新时触发	数据更新时，做一些处理（此处也可以用watch进行观测）
beforeDestroy	组件销毁前触发	实例还是可以用的
destroyed	组件销毁时触发，vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在	组件销毁时进行提示

下面我们会以mounted钩子函数作为例子进行演示其使用（Axios异步通信是在mounted中进行的），其他的钩子函数也就是照虎画猫。

二、如何使用Axios

使用文档：http://www.axios-js.com/zh-cn/docs/

NPM:

npm install --save axios vue-axios

CDN:

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

---

当我们引入axios后，存在一个axios对象。下面介绍4个方法。

1.执行get数据请求（常用）

url：必填，请求的服务器地址

params：选填，请求时携带的参数

res：不一定要是res，可以自定义参数名，接收服务器响应的结果

error：错误处理

axios.get('url',{
    params:{
        name:'寒江（相当于url?name=寒江）'，
    },
})
.then((res)=>{   //  处理成功的函数
    console.log(res);   
})
.catch((error)=>{  //  错误处理
    console.log(error)  
})

2.执行post数据发送（常用）

data：post请求时携带的参数

const data = {
    name:'寒江',
    age:18
}
axios.post('url',data)
.then((res)=>{
    console.log(res);   //  处理成功的函数 相当于success
})
.catch((error)=>{
    console.log(error)  //  错误处理 相当于error
})

3.执行delete 数据发送

data：如果服务器端接收的参数是一个对象（bean）,那么传递参数要有data

params：如果服务器接收的参数是多个参数，那么传递参数要有params

timeout：超时设置（毫秒）

如果服务端将参数作为java对象来封装接受

axios.delete('demo/url', {
    data: {
        id: 18,
        name: '寒江',
    },
    timeout: 1000,
})

如果服务端将参数作为url参数来接受，则请求的url为:www.demo/url?id=18&name=寒江

axios.delete('demo/url', {
    params: {
        id: 18,
        name: '寒江',
    },
    timeout: 1000
})

4.执行put 数据发送

axios.put('demo/url', {
    id: 123,
    name: '寒江',
    sex: 1,
    phone: 188888888
})

---

举个例子

准备一个json文件 data.json ，作为作为要请求的资源

{
  "title": "欢迎来到，寒江の世界",
  "url": "https://blog.csdn.net/m0_45067620",
  "classify": {
    "name01": "【mybatis】",
    "name02": "【spring】",
    "name03": "【springmvc】",
    "name04": "【vue】"
  },
  "links":[
    {
      "title":"寒江のmybatis世界",
      "url": "https://blog.csdn.net/m0_45067620/category_11201059.html"
    },
    {
      "title":"寒江のspring世界",
      "url": "https://blog.csdn.net/m0_45067620/category_11155091.html"
    },
    {
      "title":"寒江のspringmvc世界",
      "url": "https://blog.csdn.net/m0_45067620/category_11181441.html"
    },
    {
      "title":"寒江のvue世界",
      "url": "https://blog.csdn.net/m0_45067620/category_11201059.html"
    }
  ]
}

---

介绍两个vue的函数

mounted()：vue的声明周期函数，在此函数中我们可以进行一些DOM操作。

data()：注意这里不同与之前的data属性，这里是data函数。当data是函数的时候，每一个实例的data属性是独立的，不会相互影响，反之…

mounted()函数：

mounted() {
   axios.get("data.json").then(repsonse=>(this.info=repsonse.data))
}

data()函数：
注意：data函数的返回值的格式要和json的格式一致

		data(){
            return{ //表示整个json
                info: //
                   {
                    title:null,
                    url:null,
                    classify:{
                        name01:null,
                        name02:null,
                        name03:null,
                        name04:null
                    },
                    links:[
                        {
                            title:null,
                            url:null
                        },
                        {
                            title:null,
                            url:null
                        },
                        {
                            title:null,
                            url:null
                        },
                        {
                            title:null,
                            url:null
                        }
                    ]
                }
            }
        }

---

整合：

<div id="axios" v-clock>
    <h2>{{info.title}}:<a href="{{info.url}}">{{info.url}}</a></h2>
    <div>
        <h3 v-for="item in info.links">
            {{item.title}}:<a href="{{item.url}}">{{item.url}}</a>
        </h3>
    </div>
</div>

    new Vue({
        el: '#axios',
        data(){
            return{
                //格式要和json一致
                info:{
                    title:null,
                    url:null,
                    classify:{
                        name01:null,
                        name02:null,
                        name03:null,
                        name04:null
                    },
                    links:[
                        {
                            title:null,
                            url:null
                        },
                        {
                            title:null,
                            url:null
                        },
                        {
                            title:null,
                            url:null
                        },
                        {
                            title:null,
                            url:null
                        }
                    ]
                }
            }
        },
        mounted() {
            axios.get("data.json").then(repsonse=>(this.info=repsonse.data))
        }
    })

---

解决vue页面加载时出现{{message}}闪烁

原因：浏览器的解析是自上而下的，在加载到{{message}}的时候，vue还没有被加载，导致闪烁问题。

解决：使用v-clock。在根标签上加上"v-clock"即可解决闪烁问题。

三、Axios的优点

优点
1.从浏览器中创建 XMLHttpRequest
2.支持Promise API
3.提供了一些并发请求的接口
4.自动转换 JSON 数据
5.浏览器端支持防止 CSRF (跨站请求伪造)

---

有些路很远，走下去会很累。可是，不走，会后悔…