[toc]

Lecture15-axios 概念与请求（GET - POST）

1、本节讲什么

学会用 axios 发 HTTP 请求拿后端数据（GET）、向后端提交（POST）——这是前端联调的最核心技能。你已在后端写过 SpringMVC，这里站在前端这一侧。顺带解决一个必然遇到的坎：跨域（概念提前讲，机制第 20 节专题）。

2、概念速览

什么是 Ajax / 请求：前端用 JavaScript 代码发请求拿数据，而不是刷新整个页面。你请求访问后端一个接口（URL），后端返回 JSON 数据，前端把它渲染到页面。

为什么用 axios 而不用手写：axios 是现成的请求库（相当于 Java 的 RestTemplate / OkHttp），帮你自动处理 JSON、统一配置、错误信息更友好。你只需写"请求哪个地址、什么方法、带什么参数"。

类比 Java：axios.get('/users') 就相当于 restTemplate.getForObject('/users', ...)。

正确 vs 误区：请求是异步的（第 3 节学过）——你要 await 拿到结果，数据在 res.data 里，别在没 await 时用。

什么是跨域：前端页面跑在 http://localhost:5173（Vite 开发端口），它去请求 http://localhost:8080（后端）时，端口/域名不同就叫跨域。浏览器会拦截"前端读不到后端响应"，控制台报 CORS 错误，长这样：

Access to XMLHttpRequest at 'http://localhost:8080/api/hello'
from origin 'http://localhost:5173' has been blocked by CORS policy

这不是后端拒绝你，而是浏览器不让"不同源的页面读回数据"。开发期最省事的解法是 Vite 代理（本节约过这一关），CORS 机制本身第 20 节专题讲。

3、先看效果

npm install axios

import axios from 'axios'

// 集中配置：基地址 + 超时。注意 baseURL 用相对路径 '/api'，交给 Vite 代理转发
const http = axios.create({ baseURL: '/api', timeout: 5000 })

// GET：拿数据（列表）
const res = await http.get('/users')
console.log(res.data)          // 数据在 res.data，不用再 .json()

// POST：提交（新增）
await http.post('/users', { name: '小明', age: 20 })

配合下面的 Vite 代理，/api/hello 会被开发服务器转发到 http://localhost:8080/api/hello——页面和请求变成同源，就不报跨域了。

4、照着做：跟后端接口联一次

1. 在 src/api/http.ts 集中创建 axios 实例（规范做法）：

import axios from 'axios'
const http = axios.create({ baseURL: '/api', timeout: 5000 })
export default http

2. 配 Vite 代理（vite.config.ts）——这是"够用配置"，把 /api 开头的请求转发到后端：

   这个代理逻辑匹配前端所有 /api 开头的请求，但是如果后端实际访问路径中不包含 /api，那么就需要通过 rewrite 操作把开头的 /api 去掉

import { defineConfig } from 'vite'
export default defineConfig({
  server: {
    proxy: {
      '/api': { 
          target: 'http://localhost:8080', 
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
      },
    },
  },
})

先记住够用写法就行：凡是以 /api 开头的请求，转发到 localhost:8080。完整的 Vite 配置（环境变量、打包等）第 19 节讲。改完要重启 npm run dev。

3. 在后端用 SpringMVC 写一个简单接口：GET /api/hello 返回 { msg: 'hello' }。
4. 前端请求并打印：

const res = await http.get('/hello')
console.log(res.data.msg)      // 应打印 hello

5. 体会"后端返回什么 → 前端 res.data 里是什么"。
6. 故意把 vite.config.ts 里的代理注释掉再请求，看控制台报跨域——你就真的认识了它。

各请求方式的方法调用参数表

关键记法：GET / DELETE 第 2 个参数是配置；POST / PUT / PATCH 第 2 个参数是数据（body）、第 3 个才是配置。路径参数（/users/5）直接写进 url，要带 query 一律放 config.params。

// GET：query 放 config.params
await http.get('/users', { params: { keyword: '红', page: 1 } })

// POST：第 2 个参数是 body 数据
await http.post('/users', { name: '小明', age: 20 })

// DELETE：路径参数拼进 url，query 放 config.params
await http.delete('/users/5')

5、常见疑问

• Q：res.data 和 .data 有什么区别？ A：axios 把后端响应整体放在 res 里，真正内容是 res.data。如果后端再包一层 { code, data }，那你要的是 res.data.data。先打印 res.data 看一眼长什么样再决定取哪层（第 24 节会用拦截器把"取层"统一剥掉）。
• Q：baseURL + '/users' 拼起来就是完整地址吗？ A：配合 Vite 代理后是。前端写相对路径 /api/users，代理转发成 http://localhost:8080/api/users。统一管 baseURL + 一处代理配置，换后端地址只改 vite.config.ts 一处。
• Q：POST 提交的数据要什么格式？ A：传一个对象即可，axios 会自动转成 JSON 并带 Content-Type: application/json。后端用 @RequestBody 接收。
• Q：跨域报错怎么办？ A：先看控制台确认是不是 CORS（见"概念速览"里的报错）。开发期用 Vite 代理（本节约过）；生产环境靠后端开 CORS（第 28 节专题讲）。前端地址写成相对路径 /api，别到处硬写 http://localhost:8080。
• Q：axios 和 fetch 用哪个？ A：都行，但 axios 语法更省事（自动 JSON、统一配置、错误处理更好），本教程实战统一用 axios。

6、规范要点

• axios 实例集中创建（src/api/http.ts），不要每个页面各自 new。
• 开发期跨域交给 Vite 代理，前端地址一律写相对路径 /api，别在业务代码里写死 localhost:8080。
• 请求方法（get/post/put/delete）、地址、参数写清楚，接口相关代码收进 src/api/。
• 拿到数据先打印再上页面，别凭猜的字段名写页面。

7、本节验证

• 会用 axios.create 集中创建带 baseURL 的实例 ✅
• 会用 http.get / http.post 发请求并在 res.data 取数据 ✅
• 会在 vite.config.ts 配 /api 代理解决开发期跨域 ✅
• 知道 GET / DELETE 第 2 个参数是配置、POST / PUT / PATCH 第 2 个是 body ✅