五、VUE基础——axios基础

最新推荐文章于 2023-04-11 17:54:47 发布

Wu_967

最新推荐文章于 2023-04-11 17:54:47 发布

阅读量147

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_41841658/article/details/115274480

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文详细介绍了axios的用途及基础使用方法，包括通过get和post方式发起HTTP请求，并展示了错误处理。提供了两个实际的请求示例，一个是获取随机笑话的GET请求，另一个是用户注册的POST请求。通过点击按钮触发请求，当请求地址正确时，能够正常获取响应；而当请求地址错误时，会捕获到错误信息。示例代码中包含了axios的导入、请求调用和响应处理过程。

摘要由CSDN通过智能技术生成

一、axios的作用

axios是一个基于promise的http库，可以用在浏览器和node.js中

axios中文文档http://www.axios-js.com/zh-cn/docs/

二、axios基础使用实例

1.步骤

(1).导入axios

(2).使用get或者post方法发送请求，如 axios.get("请求地址"?参数")、axios.post("请求地址",{参数名:参数值})

(3).使用then方法中的回调函数，这些函数会在请求成功或者失败时触发

(4).通过回调函数的形参可以获取响应内容、错误信息

2.代码实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>  
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>   <!--引入axios-->

</head>
	
	<body>
		<div id="app">
		   <input type="button" value="get请求" class="get">
           <input type="button" value="post请求" class="post">
		</div>
		<script>
			/*
                接口1：随机笑话
                请求地址：https://autumnfish.cn/api/joke/list?num=6
                请求方法：get
                请求参数：num(笑话条数，数字)
                响应内容：随机笑话
            */
            document.querySelector(".get").onclick=function(){  
                //axios.get("https://autumnfish.cn/api/joke/list?num=6")   //正确的请求地址和参数，为了测试返回正确信息
                axios.get("https://autumnfish.cn/api/joke/list1213?num=6")    //错误的请求地址，为了测试返回错误信息
                .then(function(response){
                    console.log(response);
                },
                function(err){
                    console.log(err);
                })
            }

            	/*
                接口2：用户注册
                请求地址：https://autumnfish.cn/api/user/reg
                请求方法：post
                请求参数：username(用户名，字符串)
                响应内容：注册成功或注册失败
            */
           document.querySelector(".post").onclick=function(){
                //axios.post("https://autumnfish.cn/api/user/reg",{username:"wu"})
                axios.post("https://autumnfish.cn/api/user/reg123",{username:"wu"})
                .then(function(response){
                    console.log(response);
                },
                function(err){
                    console.log(err);
                })
           }
		</script>
	</body>
</html>

3.结果

(1).get请求中的请求地址和参数正确，post中的请求地址和参数正确，点击get和post按钮，分别查看cosole页面和network页面

console：