axios之post与get请求

最新推荐文章于 2023-07-31 10:27:10 发布

一坨牛马

最新推荐文章于 2023-07-31 10:27:10 发布

阅读量3.2k

点赞数 2

分类专栏：后台 axios 文章标签： vue.js html vue

本文链接：https://blog.csdn.net/weixin_46145739/article/details/113770906

版权

后台同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

axios

1 篇文章 0 订阅

订阅专栏

axios之post与get请求

axios之post与get请求，如果觉得本片文章对你有帮助期待您的三连，关注公众号获取更多资讯
在这里插入图片描述

前言

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

提示：以下是本篇文章正文内容，下面案例可供参考

一、axios是什么？

axios 是功能强大的网络请求库，基于promise的http库，可以发送get、post请求，也是Vue，React的出现促使axios轻量级库的出现。

二、vue.js+axios的get与post请求

1.get请求

使用cdn：千万不要忘记使用axios前加上以下代码

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

axios的get用法，有点像固定公式，不过最好理解记忆，这里地址和key之间用？间隔，其次分两种情况，成功时回调函数于失败时回调函数

axios.get(地址？key=value&key2=values)
.then(function(response){
成功时回调函数
},function(err){
失败时回调函数
})

实例：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimal-ui:ios">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="">
    <script src=""></script>
</head>

<body>
	<!--axios-->
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<!--构建一个get请求的按钮-->
	<intput type="button" value="get请求" class="get">
		<script>
		<!--点击get数据-->
		document.querySelector(".get").onclick = function (){
			axios.get("https://autumnfish.cn/api/joke/list?num=3")
			.then(function(response){
			console.log(response);
			},function(err){
			console.log(err);
			})
		}
	</script>

</body>

</html>

运行如下：点击get请求按钮，get数据，控制台显示
在这里插入图片描述

2.post请求

axios.post(地址,{key:value,key2:value2})此处与get略有不同


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

axios.post(地址,{key:value,key2:value2})
.then(function(response){
成功post回调函数
},function(err){
失败回调函数
})

实例：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimal-ui:ios">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="">
    <script src=""></script>
</head>

<body>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<intput type="button" value="post请求" class="post">
	<script>
		document.querySelector(".post").onclick = function(){
		axios.axios.post("https://autumnfish.cn/api/user/reg",
            {username:"jack89898kl"})
            .then(function(response){
                console.log(response);
            },function(err){
                console.log(err)
            }
            )
        }}
	</script>
</body>

</html>

运行结果：这里是上传注册用户名jack89898kl
在这里插入图片描述

总结

总而言之，get与post请求的结构是最重要的。
如果觉得本片文章对你有帮助期待您的三连，关注公众号获取更多资讯
在这里插入图片描述

一坨牛马

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
2
评论
axios之post与get请求

axios之post与get请求axios之post与get请求，如果觉得本片文章对你有帮助期待您的三连，关注公众号获取更多资讯文章目录axios之post与get请求前言一、axios是什么？二、vue.js+axios的get与post请求1.get请求2.post请求总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考
复制链接

扫一扫