vue axios同步请求解决方案,vue用axios调用后端接口
本文主要介绍了Vue的Axios异步通信，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
1.首先，我们创建一个. json文件供交互使用。我们列出json数据格式来模拟，传到前端，帮助朋友们理解。
{
名称:咸鱼_翻身，
网址: https://blog . csdn . net/AAA 123 _ 456 AAA ，
page: 1，
地址:{
街道，湘桥区，
城市:潮州市，
国家:中国
},
链接:[
{
名称:咸鱼_翻身1 ，
URL : https://blog . csdn . net/AAA 123 _ 456 AAA
},
{
名称:咸鱼_翻身2 ，
URL : https://blog . csdn . net/AAA 123 _ 456 AAA
},
{
名称:咸鱼_翻3 ，
URL : https://blog . csdn . net/AAA 123 _ 456 AAA
}
]
}
记得看自己所处的环境。你要在这里选择支持ES6。
2.接下来，我们创建一个。html文件并使用Axios异步通信实现数据通信。
！声明文档类型
html lang=en
头
meta charset=UTF-8
标题标题/标题
/头
身体
div id=vue
差异
{{info.name}}
{{info.address}}
/div
/div
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(){
返回{
//请求的返回参数的格式应该和json string一样，标准一点。当然，直接空白也是可以的。
信息：{
名称：null，
地址：{
街道：空，
城市：空，
国家：空
},
}
}
},
Mounted(){//hook函数，即在程序执行时，可以插入到程序中间来执行。
//链式编程，记得用ES6支持的版本
axios.get(./data . JSON’)。然后(response=(this . info=response . data))
}
});
/脚本
/body
/html
运行结果：
3.当然，以上是比较标准的写法。我们不妨简单写一下：
！声明文档类型
html lang=en
头
meta charset=UTF-8
标题标题/标题
/头
身体
div id=vue
差异
{{info.name}}
{{info.address}}
/div
/div
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 ，
//注意：这里是数据：{}，但是里面必须有一个原始参数info，然后axios得到的数据绑定到info。
//数据是属性，属性值可以是对象，也可以是函数，本质上是对象。vue会以不同的方式判断数据属性的类型。
数据：{
信息：{}
},
已安装(){
axios.get(./data . JSON’)。然后(response=(this . info=response . data))
}
});
/脚本
/body
/html
运行结果：
4.要注意URL的交互，因为这是用v-bind来绑定值的。
div id=vue 垂直时钟
差异
{{info.name}}
{{info.address}}
A-bind: href= info.url 单击以转到我的博客/a
/div
/div
点击跳转，感兴趣的朋友可以关注一下！
5.技巧
有些朋友可能网络不好，你会看到在页面加载过程中会先加载一个模板，这和他的Vue的生命周期有关：
有些朋友可能会觉得很丑。这里有一个解决方案，让他的瞬间先变白而不是模板：
！声明文档类型
html lang=en
头
meta charset=UTF-8
标题标题/标题
风格
/*!-v-clock:解决闪烁问题-*/
[垂直时钟]
显示：无；
}
/风格
/头
身体
！-定制垂直时钟-
div id=vue 垂直时钟
差异
{{info.name}}
{{info.address}}
/div
/div
总结
本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。