目录
上一节我们介绍了本章要学习的内容，对于接下来要介绍的知识点应该有了基本的概念，这一节我们将介绍axios的基本使用、介绍它是如何来发送请求以及获取响应的内容。
一、axios语法介绍
作为一个JS库，为了使用它，首先我们需要导包，这里提供官网给的在线地址，在保证联网的状态下，把这段代码拷贝在页面上就可以使用了。在导入axios包之后，会在页面上注册一个全局的axios对象，通过它就可以来发送请求了。
这里以两种常见的请求方法为例，来演示如何使用。
axios-get请求
首先是get请求，地址就是文档提供的接口地址，然后点then方法，它内部传递的第一个回调函数会在请求响应完成之后触发，第二个函数会在请求失败的时候触发。他们的形参可以用来获取信息，一个是服务器响应的内容，一个是错误的信息。
如果需要传递参数在url的后面跟上查询字符串就可以啦，中间使用问号的方式进行分割，查询字符串的格式是key=value&key2=value2，当然这里可以一路写下去，至于到底要写几个以及里面具体的值，其中key是文档提供的，value是我们要具体传输的数据。
axios-post请求
然后是post请求，大体的写法和get请求基本一致，不同之处在于数据是以对象的形式，写在我们post方法的第二个参数内部，格式就是一个对象 key:value,key2:value2 的写法，其中key由接口文档提供，value是具体要传输的数据。
关于网络请求库还不够，我们还需要网络访问的接口，所以这里提供了两个预先准备好的接口，但是注意前提是你要保证联网状态，一个是通过get请求获取笑话的接口，一个是通过post请求注册用户的接口，基础语法和可以演示的接口已经介绍完毕了。
二、代码验证测试
1、axios基本使用_get_post请求
（1）实例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>01_axios基本使用_get_post请求</title>
</head>
<body>
<input type="button" value="get请求" class="get">
<input type="button" value="post请求" class="post">
<!-- 这里是演示axios的使用，所以并没有导入Vue包 -->
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
/*
接口1:随机笑话
请求地址:https://autumnfish.cn/api/joke/list
请求方法:get
请求参数:num(笑话条数,数字)
响应内容:随机笑话
*/
//找到类名为get的请求按钮，为它绑定一个点击事件
document.querySelector(".get").onclick = function () {
axios.get("https://autumnfish.cn/api/joke/list?num=3")
// axios.get("https://autumnfish.cn/api/joke/list123?num=3")//演示报错执行方法2
.then(function (response) {
console.log(response);
}, function (err) {
console.log(err);
})
}
/*
接口2:用户注册
请求地址:https://autumnfish.cn/api/user/reg
请求方法:post
请求参数:username(用户名,字符串)
响应内容:注册成功或失败
*/
//找到类名为post的请求按钮，为它绑定一个点击事件
document.querySelector(".post").onclick = function () {
axios.post("https://autumnfish.cn/api/user/reg",
//axios.post("https://autumnfish.cn/api/user/reg123",//演示报错执行方法2
// { username: "盐焗西兰花" })
{ username: "菠菜" })
.then(function (response) {
console.log(response);
}, function (err) {
console.log(err);
})
}
// axios的功能不仅仅只有这些，详细可查看官网：https://github.com/axios/axios
// 后面我们也会补充一些高级功能
</script>
</body>
</html>
（2）效果展示
1>get请求三条数据，成功
2>get请求，使用错误地址：https://autumnfish.cn/api/joke/list123?num=3，报错如下：
Error: Request failed with status code 404
3>post请求，已被注册提示
4>post请求，使用错误地址：https://autumnfish.cn/api/user/reg123，报错如下：
Error: Request failed with status code 404
5>post请求，注册成功提示
三、内容-总结
axios的功能不仅仅只有这些，详细可查看官网：https://github.com/axios/axios
后面我们也会补充一些高级功能