企业培训笔记：axios 发送 ajax 请求

---

axios 简介

axios 是基于 Promise 的HTTP客户端，用于浏览器和 Node.js，是现代前端开发中最流行的请求库之一。

核心特性

1. 浏览器与 Node.js 通用
   • 浏览器端基于 XMLHttpRequest，Node.js 端基于 http 模块。
2. Promise API
   • 支持 async/await 语法，避免回调地狱：

     const response = await axios.get('/api/data');
     

3. 拦截器
   • 可全局拦截请求和响应（如添加认证头、统一错误处理）：

     axios.interceptors.request.use(config => {config.headers.Authorization = 'Bearer token';return config;
     });
     

4. 请求取消
   • 使用 AbortController 取消未完成的请求：

     const controller = new AbortController();
     axios.get('/api/data', { signal: controller.signal });
     controller.abort(); // 取消请求
     

5. 自动转换 JSON
   • 响应数据自动解析为 JSON，请求数据自动序列化为 JSON。
6. 拦截错误处理
   • 统一处理 HTTP 错误状态码（如 401、500）：

     axios.interceptors.response.use(response => response,error => {if (error.response.status === 401) {// 处理认证失败}}
     );
     

典型应用场景

• 前后端数据交互（如获取用户信息、提交表单）。
• 与 REST API 通信。
• 实时数据更新（如轮询服务器状态）。

一，Vue工程中安装axios

1，单击【Terminal】按钮，打开命令行窗口——输入：【npm Install axios】——单击【Enter】键安装axios。

2，在项目工程目录中查看安装好的axios。

二，编写app.vue

<template><div id="app"> <!-- 添加根元素 --><h1>vue工程</h1><router-view/></div>
</template><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;
}nav {padding: 30px;
}nav a {font-weight: bold;color: #2c3e50;
}nav a.router-link-exact-active {color: #42b983;
}
</style>

三，编写HomeView.vue

<template><button @click="sendAjax">发送请求</button>
</template><script setup>import axios from "axios";
/*定义函数向后台发送ajax请求*/
function sendAjax(){axios.get("http://localhost:8081/hello?name=zhangsan").then((response)=>{ //回调函数在前端处理后台服务器响应的结果console.log(response);console.log(response.data); //获得服务器响应数据}).catch((error)=>{ //如果发生异常，执行该函数，捕获异常console.log(error);});
}
</script>

四，Idea打开后台项目

1，选择【File】——【Open】。

2，选择创建好的后台项目，单击【OK】按钮，打开项目。

3，单击【New Windows】，以新窗口的形式打开这个项目，避免关闭先前打开的Vue项目。

4，如下图，项目成功打开。

五，创建HelloController

1，右击【Controller】包——选择【New】——单击【Java Class】。

2，输入类名【HelloController】——单击【Enter】键，创建类。

3，编辑HelloController的代码。

package net.army.controller;import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;/*** 功能：测试接收客户端请求* 日期：2025年07月03日* 作者：梁辰兴*/
@RestController
public class HelloController {// 处理客户端请求@RequestMapping("/sayHello")@CrossOrigin //解决跨域问题public String hello(String name){// 将name输出到控制台System.out.println("Hello："+name);// 将name返回给客户端return "Hello："+name;}
}

六，配置web访问端口

将端口号更改为8081

# 应用服务 WEB 访问端口
server.port=8081

七，运行项目，查看效果

（一）运行后端SpringBoot项目

1，单击绿色运行按钮，选择运行方式。

2，单击【Run ‘SpringBootMyBatisDay…’】，运行项目。

3，成功运行界面效果图。

（二）运行前端Vue3项目

1，单击【serve】按钮，运行项目。

2，成功运行效果图。

（三）查看效果

1. 浏览器查看

1，单击地址：http://localhost:8080/，进入前端页面；或者复制该地址，粘贴到浏览器的地址栏，按回车键，打开页面。

2，在浏览器界面，按下F12键，启动开发者模式，单击【控制台】打开控制台界面。

3，单击界面中的【发送请求】按钮——查看控制台输出的信息。

2. 后端控制台查看

1，打开后端的项目的Idea窗口，单击【Run】按钮，打开运行窗口。

2，查看接收到前端发过来的请求内容，zhangsan。