vue axios同步请求解决方案,vue用axios调用后端接口
本文主要详细介绍了Vue的Axios异步通信。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
:
目录
1.什么是Axios2，为什么要用Axios3，第一个Axios应用4，Vue的生命周期总结？
1.什么是Axios
Axios是一个开源的异步通信框架，可以在浏览器和节点JS中使用。其主要功能是实现AJAX异步通信。其特点如下：
从浏览器创建XMLHttpRequests，从node.js创建http请求，支持Promise API[JS中的链式编程]，拦截请求和响应，转换请求数据和响应数据，取消请求，自动转换JSON数据，客户端支持防御XSRF(跨站请求伪造)GitHub:https://github.com/axios/axios
中文文档:http://www.axios-js.com/
2、为什么要使用Axios
因为Vue.js是视图层框架，作者(尤雨溪)严格遵守SoC(注意力分离)，所以Vue.js不包含AJAX的通信功能。为了解决通讯问题，作者开发了一个名为vue-resource的插件，但是进入2.0版本后停止了这个插件的维护，推荐Axios框架。少用jQuery，因为它操作Dom太频繁了！
3、第一个Axios应用程序
我们开发的接口大部分都是JSON格式的，可以先在项目中模拟一段JSON数据。数据内容如下：创建一个名为data.json的文件并填写以上内容，放在项目的根目录下。
{
姓名:疯神说Java ，
网址: https://blog.kuangstudy.com ，
page: 1，
isNonProfit: true，
地址:{
街道:光门，
城市:陕西Xi安，
国家:中国
},
链接:[
{
姓名:哔哩哔哩，
网址: https://space . bilibili . com/95256449
},
{
姓名:疯神说Java ，
网址: https://blog.kuangstudy.com
},
{
姓名:百度，
网址: https://www.baidu.com/
}
]
}
测试代码
！声明文档类型
html lang= en xmlns:v-binf= http://www . w3 . org/1999/XHTML
头
meta charset=UTF-8
标题标题/标题
！-V-斗篷解决了闪烁问题-
风格
[v形斗篷]{
显示：无；
}
/风格
/头
身体
div id=vue
Div地名：{{info.name}}/div
Div地址：{ { info . address . country } }-{ { info . address . city } }-{ { info . address . street } }/div
div link:av-binf:href= info . URL target= _ blank { { info . URL } }/a/div
/div
！-介绍js文件-
script src= https://cdn . jsdelivr . net/NPM/vue @ 2 . 5 . 21/dist/vue . min . js /script
script src= https://UNP kg . com/axios/dist/axios . min . js /script
脚本类型=文本/javascript
var vm=new Vue({
埃尔： #vue ，
//数据：属性：虚拟机
data(){
返回{
信息：{
名称：null，
地址：{
国家：空，
城市：空，
街道：空
},
url:空
}
}
},
Mounted(){//hook函数
爱可信。get(data.json )。然后(response=(this . info=response . data))；
}
});
/脚本
/body
/html
说明：
1.这里，v-bind用于将a:href的属性值与Vue实例中的数据绑定。
2.使用axios框架的get方法请求AJAX，自动将数据封装到Vue实例的数据对象中。我们在数据中。
3.的数据结构必须与Ajax响应返回的数据格式相匹配！
4、Vue的生命周期
官方文件：https://cn.vuejs.org/v2/guide/instance.html#生命周期图
Vue实例有一个完整的生命周期，即从创建第一个女性平台数据开始，编译模板，挂载DOM，渲染-更新-渲染，卸载等一系列过程。我们称之为Vue的生命周期。一般来说，Vue实例从创建到销毁的过程就是生命周期。
在Vue的整个生命周期中，它提供了一系列的事件，允许我们在事件被触发时注册JS方法，用我们注册的JS方法控制全局。这在这些事件响应方法中直接指向Vue的实例。
总结
本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。