Vue的异步渲染axios问题
更新时间：2023年03月24日 16:58:23 作者：LeeGaKi
这篇文章主要介绍了Vue的异步渲染axios问题，具有很好的参考价值，希望对大家有所帮助。
Vue异步渲染axios
首先我们要知道axios不是vue里面的。
axios是一个基于Promise的，发送http请求的一个工具库，并不是vue中的第三方插件，使用时不能通过“Vue.use()”安装插件，需要在原型上进行绑定。
axios异步跟jquery中ajax其实是一样的，功能相同，不过获取到数据以后渲染的难易程度不同让axios更加突出，jquery需要不停的操作dom元素进行渲染，而axios利用Vue进行渲染，其中的方便就大幅度展现出来了。
首先用Springboot实现一下简单的axios异步请求以及渲染。
点击事件触发，将获取的数据进行渲染。
<div id="box">
<span>{{name}}</span>
<input type="button" v-on:click="ss">
</div>
<script type="text/javascript">
new Vue({
el:"#box",
data:{
name:'李佳琪'
},
methods:{
ss:function (){
axios.get("/boot1/123").then(response=>(this.name=response.data))
}
}
})
</script>这里在简单说一下，thymeleaf中的路径引用
引入外部文件的写法。
<link rel="stylesheet" type="text/css" th:href="@{/css/ss.css}" rel="external nofollow" />
<script th:src="@{/js/vue.js}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{https://unpkg.com/axios/dist/axios.min.js}"></script>Vue axios发起异步请求
axios是vue中专门用来发起异步请求的库，可以理解为python中的requests库，java中的rest-assured库。
1.安装axios
cnpm install axios -S
2.使用
axios.get(url):发起请求.then():请求成功需要做的事.catch():请求失败需要做的事
要修改data()中的属性，此处用箭头函数来指定this对象，否则，this.xxx修改的是.then()中的function对象。
1.往往我们可以把这类api的请求都封装到一个api.js文件中：
2.使用的地方导入：
真实项目中的使用
1.封装api.js,将axios请求的多个接口封装好
2.在组件的created或者mounted或者methods中向后端发起axios请求，得到数据
3.将得到的数据赋值给组件的data()中的属性，组件再在模版<template></template>中渲染，展示给前端。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
今天小编就为大家分享一篇vue点击自增和求和的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
vue项目打包解决静态资源无法加载和路由加载无效(404)问题
这篇文章主要介绍了vue项目打包，解决静态资源无法加载和路由加载无效(404)问题,静态资源无法使用，那就说明项目打包后，图片和其他静态资源文件相对路径不对,本文给大家介绍的非常详细，需要的朋友跟随小编一起看看吧2023-10-10
这篇文章主要介绍了Vue+ElementUI容器无法铺满网页的问题解决,文章通过图文结合的方式给大家讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-08-08
相信大部分兄弟都体验过Vite了,都知道它很快,在学习的时候,官网上的各种配置也是看的眼花缭乱,不知道哪些是必要掌握的,下面这篇文章主要给大家介绍了关于Vite常见配置选项的相关资料,需要的朋友可以参考下2024-09-09
vue使用iview的modal弹窗嵌套modal出现格式错误的解决
这篇文章主要介绍了vue使用iview的modal弹窗嵌套modal出现格式错误的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
本文主要介绍了Vue.js实现对视频预览的示例代码,通过监听文件选择事件和使用FileReader API,可以实现视频文件的预览功能,感兴趣的可以了解一下2025-01-01
这篇文章主要介绍了vue3实现动态路由及菜单,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了el-form错误提示信息手动添加和取消,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
Vue的watch侦听器格式有两种：方法格式和对象格式的侦听器，这篇文章主要介绍了Vue watch 侦听对象属性相关知识,需要的朋友可以参考下2023-04-04
本篇文章主要介绍了Vue配合iView实现省市二级联动的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
最新评论