vue和axios的简单使用

最新推荐文章于 2024-04-04 12:41:35 发布

veritable、

最新推荐文章于 2024-04-04 12:41:35 发布

阅读量513

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/Sendsunshine/article/details/108415027

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

axious强大的网络请求库：

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

Get请求：

document.querySelector(".get").onclick = function(){
    //.then方法在服务器响应回调时触发，第一个函数相应成功，第二个函数响应失败
    axios.get("请求接口?参数=''").then(function(response)){
            console.log(response);
    },function(err){
            console.log(err);
    })
}

Post请求：

document.querySelector(".post").onclick = function(){
    //.then方法在服务器响应回调时触发，第一个函数相应成功，第二个函数响应失败
    axios.post("请求接口",{参数=''}).then(function(response)){
            console.log(response);
    },function(err){
            console.log(err);
    })
}

axios+vue使用：

<!DOCTYPE html>
<html>
<head>
	<title></title>
			<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="app">
	<input type="button" value="点击获取" @click="getJoke"><br/>
	{{joke}}
</div>
<script type="text/javascript">
	var app=new Vue({
		el:"#app",
		data:{
			joke:"很好笑的笑话"
		},
		methods:{
			getJoke:function(){
				var that=this;
				axios.get("https://autumnfish.cn/api/joke").then(
					function(response){
						console.log(response);
						that.joke=response.data;
					},function(err){}
					)
				}
			}
	})
</script>
</body>
</html>

veritable、

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
vue和axios的简单使用

axious强大的网络请求库： <script src="https://unpkg.com/axios/dist/axios.min.js"></script>Get请求：document.querySelector(".get").onclick = function(){ //.then方法在服务器响应回调时触发，第一个函数相应成功，第二个函数响应失败 axios.get("..
复制链接

扫一扫