vue结合axios：get、post

2022-06-19 00:02:15 阅读：149 来源： 互联网

标签：function axios get api joke vue post response

axios使用

导包

<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>

标签：function,axios,get,api,joke,vue,post,response
来源： https://www.cnblogs.com/Huyi-1208/p/16389663.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9