目录
上一节我们介绍了本章要学习的内容,对于接下来要介绍的知识点应该有了基本的概念,这一节我们将介绍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
后面我们也会补充一些高级功能