Vue的axios发送异步请求的使用

最新推荐文章于 2024-07-30 08:20:29 发布

记或往

最新推荐文章于 2024-07-30 08:20:29 发布

阅读量597

点赞数 1

分类专栏： vue坎坷之路总结文章标签： vue ajax

本文链接：https://blog.csdn.net/xiaozhuzhuyang/article/details/114699472

版权

vue坎坷之路总结专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Vue的axios发送异步请求的使用

Axios是一个开源的可以用在浏览器端和Nodejs的异步通信框架，主要实现ajax异步通信。

在这里插入图片描述

vue2.0后推荐使用axios框架，少用jquery，因为jquery操作Dom太过频繁。

下面我用CDN的方式加载axios需要的环境来演示Axios的使用：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>		
		<!-- 解决闪屏 -->
		<style>
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			//获取vue的值
			<li>{{info.name}}</li>
			//v-bind 绑定属性 获取vue中的值
			<a v-bind:href="info.url">点击</a>
		</div>
	</body>	
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
	<script>
		var vm = new Vue({
			el:"#app",
			data () {
				return {
					info: {
						name:null,
						age:null,
						url:null
					}
				}
			},
			mounted () {  //编译好的html挂载到页面完成后执行的事件 （我们通常叫钩子）
			//访问同级下的data.json文件
				axios.get('data.json').then(response=>(this.info = response.data));
			}
		})
	</script>	
	
</html>

访问的data.json文件中的数据：

{
	"name":"yang",
	"age":20,
	"sex":"男",
	"url":"https://www.baidu.com/"
}

显示效果：
在这里插入图片描述

这里注意的是如果axios的then回调函数的时候需要用ES6特性：response=>(this.info = response.data)

记或往

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录