Axios的简单学习（一文上手Axios！）

article/2025/6/3 12:38:00

页内目录
一，Axios的介绍
二，Axios的配置
三，Axios的基本格式
四，使用Axios获取数据

一，Axios的介绍

官方介绍
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中，在Vue中官方建议使用axios库来实现ajax操作。
特性：
从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF
请求方式：
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
我的理解：axios将所有请求的数据自动封装成json对象，向服务端发送，不需要开发者手动封装，避免了大量代码，和繁琐的操作

二，Axios的配置

打开Axios中文说明：（Axios看云）
找到
出现如下界面
直接右键=>点击另存为=>到桌面
复制粘贴到IDEA的js包下（这里的vue.js是Vue的文件，所以Vue也要会点，需要搭配使用；这里小编写过）快速上手Vue的教学

三，Axios的基本格式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Axios的学习</title>
</head>
<body>
<div id="users">
<!--数据展示区-->
</div>
<script src="js/axios.min.js"></script><!--调用axios文件-->
<script src="js/vue.js"></script><!--调用vue文件-->
<script>new Vue({el:'#users',data(){return{}},methods:{//方法区getUsers(){//方法axios.get()//传入url地址.then()//请求响应成功执行的函数.catch()//请求或响应失败执行的函数}},created(){//DOM构建前执行this.getUsers}});
</script>
</body>
</html>

四，使用Vue结合Axios获得数据

使用Vue结合Axios获得查询结果

<div id="users"><!--数据展示区-->
</div>
<script src="js/axios.min.js"></script><!--调用axios文件-->
<script src="js/vue.js"></script><!--调用vue文件-->
<script>new Vue({el: '#users',data() {return {}},methods: {//方法区getUsers() {//方法axios.get('user/queryUsers')//传入url地址，这里是你的方法的地址//请求响应成功执行的函数.then(response => {//箭头函数//从data属性中获得服务端回传数据let users = response.data;//将获得的数据赋值于data域中的usersconsole.log(users);}//请求或响应失败执行的函数).catch(err => {alert("错误");console.log(err);})}},created() {//DOM构建前执行this.getUsers();}});
</script>

因为我们将数据在浏览器控制台输出的所以F12，查看是否能够得到数据
在这里插入图片描述
将得到的数据与界面绑定

<body>
<div id="users"><!--数据展示区-->{{users}}
</div>
<script src="js/axios.min.js"></script><!--调用axios文件-->
<script src="js/vue.js"></script><!--调用vue文件-->
<script>new Vue({el: '#users',data() {return {users: [],}},methods: {//方法区getUsers() {//方法axios.get('user/queryUsers')//传入url地址//请求响应成功执行的函数.then(response => {//箭头函数//从data属性中获得服务端回传数据this.users = response.data;//将获得的数据赋值于data域中的usersconsole.log(this.users);}//请求或响应失败执行的函数).catch(err => {alert("错误");console.log(err);})}},created() {//DOM构建前执行this.getUsers();}});
</script>

在这里插入图片描述
将数据做成表格展示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Axios的学习</title><style>table{width: 1000px;border:1px solid black;border-collapse: collapse;}th,td{height: 50px;text-align: center;border:1px solid black;}td{background-color: darkgray;color: #ffffff;}</style>
</head>
<body>
<div id="users"><table><thead><tr><td>用户编号</td><td>用户名</td><td>用户密码</td><td>邮箱</td><td>生日</td><td>爱好</td><td>性别</td><td>地址</td></tr></thead><tbody><tr v-for="user in users"><th>{{user.userId}}</th><th>{{user.userName}}</th><th>{{user.userPassword}}</th><th>{{user.userEmail}}</th><th>{{user.userBirthday}}</th><th>{{user.userHobbys}}</th><th>{{user.userSex}}</th><th>{{user.userAddress}}</th></tr></tbody></table>
</div>
<script src="js/axios.min.js"></script><!--调用axios文件-->
<script src="js/vue.js"></script><!--调用vue文件-->
<script>new Vue({el: '#users',data() {return {users: [],}},methods: {//方法区getUsers() {//方法axios.get('user/queryUsers')//传入url地址//请求响应成功执行的函数.then(response => {//箭头函数//从data属性中获得服务端回传数据this.users = response.data;//将获得的数据赋值于data域中的usersconsole.log(this.users);}//请求或响应失败执行的函数).catch(err => {alert("错误");console.log(err);})}},created() {//DOM构建前执行this.getUsers();}});
</script>
</body>
</html>