axios结合Vue使用

小狐狸崽子OvO

已于 2022-06-20 11:09:40 修改

阅读量208

点赞数 1

文章标签： vue.js 前端

于 2022-06-19 19:34:39 首次发布

本文链接：https://blog.csdn.net/My_Java_yon/article/details/125361354

版权

导包

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Get请求

axios.get(地址?key=value&key2=values).then(function(response){},function(err){})

Post请求

axios.post(地址,{key:value,key2:value2}).then(function(response){},function(err){})

测试接口

get请求接口:笑话
请求参数：num，参数说明：笑话条数，备注：类型为数字
响应内容：随机笑话

https://autumnfish.cn/api/joke/list

post请求接口：用户注册
请求参数：username，参数说明：用户名，备注：不能为空
响应内容：注册成功或者失败

https://autumnfish.cn/api/user/reg

案例

<body>
    <div>
        <input type="button" value="get笑话" class="get"></input>
    </div>
    <div>
        <input type="button" value="post注册" class="post"></input>
    </div>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	document.querySelector(".get").onclick = function(){
		axios.get("https://autumnfish.cn/api/joke/list?num=1").then(function(response){
			alert(response.data.data[0]);
			console.log(response);
		})
	}
	document.querySelector(".post").onclick = function(){
		axios.post("https://autumnfish.cn/api/user/reg",{username:"huyi"}).then(function(response){
			alert(response.data.msg);
			console.log(response);
		})
	}
</script>

vue结合axios

导包

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

get请求

一条随机笑话，响应内容：一条随机笑话

https://autumnfish.cn/api/joke

案例

<body>
    <div id="Joke">
        <input type="button" value="get笑话" @click="getJoke"></input>
        <span>{{joke}}</span>
    </div>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	var Joke = new Vue({
		el:"#Joke",
		data:{
			joke:"一个笑话"
		},
		methods:{
			getJoke:function(){
				var thin=this;
				axios.get("https://autumnfish.cn/api/joke").then(
					function(response){
						thin.joke=response.data
						console.log(response)
					}		
				)
			}
		}
	})
</script>