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

文章目录

• [axios 简介](#axios 简介)
• 一，Vue工程中安装axios
• 二，编写app.vue
• 三，编写HomeView.vue
• 四，Idea打开后台项目
• 五，创建HelloController
• 六，配置web访问端口
• 七，运行项目，查看效果
• • （一）运行后端SpringBoot项目
  • （二）运行前端Vue3项目
  • （三）查看效果
  • • [1. 浏览器查看](#1. 浏览器查看)
    • [2. 后端控制台查看](#2. 后端控制台查看)

---

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。