axios发送ajax请求

最新推荐文章于 2024-08-14 14:35:58 发布

jarvis314159

最新推荐文章于 2024-08-14 14:35:58 发布

阅读量174

点赞数

CC 4.0 BY-SA版权

分类专栏：前端笔记文章标签： ajax axios

本文链接：https://blog.youkuaiyun.com/weixin_43283513/article/details/112402589

前端笔记专栏收录该内容

12 篇文章

订阅专栏

博客介绍了axios的概念，它可更简洁地发送ajax请求。还说明了其用法，包括模拟后台返回数据，用axios发送ajax请求并渲染数据，最后展示了效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

axios概念

用于更加简洁地发送ajax请求

用法

模拟后台返回的数据

{
	"success":true,
	"code":100,
	"messsage":"成功",
	"data":[
				{"name":"诺亚","des":"第一道光"},
		        {"name":"雷杰多","des":"宇宙中的传说"},
				{"name":"撒加","des":"传说级奥特曼"}
		    ]
}

axios发送ajax请求，并渲染数据

<div id="app"> 
	<table border="1">
		<tr v-for="user in users">
			<td>{{user.name}}</td>
			<td>{{user.des}}</td>
		</tr>
	</table>
</div>

<script>
	var vm = new Vue({
		el:"#app",
		data:{
			users:[]
		},
		created(){
			this.getUserList();
		},
		methods:{
			getUserList(){
				axios.get("json/data.json")
				.then(response => {  //请求成功执行then
					console.log(response);
					this.users = response.data.data;  
				})
				.catch(error =>{    //请求失败执行catch
					console.log(error);
				})
			}
		}
	});
</script>