Vue网络通信--异步通信

Vue网络通信--异步通信

Axios概述

Axios，是一个基于promise的网络请求库，作用于node.js中在服务器端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。

主要特点：

• 从浏览器创建 XMLHttpRequests

• 从 node.js 创建 http 请求

• 支持 Promise API

• 拦截请求和响应

• 转换请求和响应数据

• 取消请求

• 自动转换JSON数据

• 客户端支持防御XSRF

和ajax区别

ajax技术实现了局部数据的刷新，而axios实现了对ajax的封装

==ajax : 用于快速的创建动态页面，能够实现无刷新更新数据从而提高用户体验。

==axios: 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。

mounted()

获取数据

var app= new Vue({
    el:"#list",
    //data:是属性
    //data(){}是方法，方法中的return接受获取到的数据
    data(){
        return {
            info:{
                //格式与json格式必须一毛一样
                name:null,
                address:{
                    street:null,
                    city:null,
                    country:null
                },
                links:[
                    {name:null},
                    {name:null},
                    {name:null}
                ]
​
            }
        }
    },
    mounted(){
        //通过get()从data文件中获取json数据,response响应，箭头指向产生的事情
        axios.get('data.json').then(response=>(this.info=response.data));
    }//钩子函数
})

渲染至前端

<div id="list">
    <!-- 将获取到的数据渲染到前端 -->
    <div>{{info.address.street}}</div>
    <div>{{info.address.city}}</div>
    <div>{{info.address.country}}</div>
</div>

==注意==

使用data()，用return接收返回数据，仅在组件内可见，如果使用data,则是全局可见，容易造成数据污染