axios发送ajax请求_axios 模拟ajax

axios概念

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

用法

模拟后台返回的数据

{
	"success":true,
	"code":100,
	"messsage":"成功",
	"data":[
				{"name":"诺亚","des":"第一道光"},
		        {"name":"雷杰多","des":"宇宙中的传说"},
				{"name":"撒加","des":"传说级奥特曼"}
		    ]
}
1
2
3
4
5
6
7
8
9
10

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

效果