企业培训笔记：axios 发送 ajax 请求-EW帮帮网

文章目录

axios 简介
一，Vue工程中安装axios
二，编写app.vue
三，编写HomeView.vue
四，Idea打开后台项目
五，创建HelloController
六，配置web访问端口
七，运行项目，查看效果

axios 简介

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

核心特性

浏览器与 Node.js 通用
- 浏览器端基于 XMLHttpRequest，Node.js 端基于 http 模块。
Promise API
- 支持 async/await 语法，避免回调地狱：
```
const response = await axios.get('/api/data');
```

拦截器

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

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

请求取消

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

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

自动转换 JSON
- 响应数据自动解析为 JSON，请求数据自动序列化为 JSON。

拦截错误处理

统一处理 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。

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