Vue之 axios-CSDN博客

本文链接：https://blog.csdn.net/qq_38848781/article/details/127989443

演示Vue之 axios

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="./lib/vue-2.6.12.js"></script>
		<script src="./lib/axios.js"></script>
		<title>axios</title>
	</head>
	<body>
		
		<div style="margin: 5px;display:inline-block;background-color: burlywood;" title="axios">
			<div id="app01">
				<p>{{result_Data01}}</p>
				<button @click="requestFun_01">发起请求</button>
				<br />
				
				<p>{{result_Data02}}</p>
				<button @click="requestFun_02">get</button>
				<br />
				
				<p>{{result_Data03}}</p>
				<button @click="requestFun_03">post</button>
				
			</div>
			<script>
				new Vue({
					el: '#app01',
					data: {
						request_method:'GET',
						request_url_get  : 'http://www.liulongbin.top:3006/api/getbooks',
						request_url_post : 'http://www.liulongbin.top:3006/api/post',
						request_id     : 1      ,
						request_name   : '哈哈' ,
						request_gender : '男'   ,
						result_Data01:'postFun_01目前无数据',
						result_Data02:'postFun_02目前无数据',
						result_Data03:'postFun_03目前无数据'
					},
					methods:{
						// async/await
						async requestFun_01(){
							// 调用 axios 方法得到的返回值是 Promise 对象
							// 使用async/await则可以把真实数据从Promise 对象中解构出来
							// 可以直接使用data，也可以用 : 起别名
							const {data : res } = await axios({
								// 请求方式
								method: this.request_method,
								// 请求的地址
								url: this.request_url_get,
								// URL 中的查询参数（get，delete……）
								params: {
								id: this.request_id
								},
								// 请求体参数（post）
								data: {
								
								},
							  //返回并处理
							})
							this.result_Data01=res;
							console.log(res);
						},
						async requestFun_02(){
							//axios的get方法
							const {data : res } = await axios.get(
								this.request_url_get,
								{
									params: {
										id: this.request_id
									}
								}
							);
							this.result_Data02=res;
							console.log(res);
						},
						async requestFun_03(){
							//axios的post方法
							const {data : res } = await axios.post(
								this.request_url_post,
								{
									name   : this.request_name,
									gender : this.request_gender
								}
							);
							this.result_Data03=res;
							console.log(res);
						}
						
					}
				});
			</script>
		</div>
		
		
		
		
		
	</body>
</html>