【前端】HTTP请求方式：GET、POST 与其他请求方法详解
文章目录
前言
在前后端分离开发中，最常见的问题之一就是：
- GET 和 POST 有什么区别？
- PUT、DELETE、PATCH 是干什么的？
- 为什么有的接口用 POST 不能用 GET？
- 为什么有时候 GET 能成功，POST 却报错？
本文系统整理 HTTP 请求方式的区别、原理与使用场景，结合 Vue + Axios 实际开发说明。
定义概念 + 缩写
一、HTTP 是什么？
HTTP（HyperText Transfer Protocol）
超文本传输协议，是浏览器与服务器之间通信的规则。
二、常见请求方式
| 方法 | 作用 | 是否修改数据 |
|---|---|---|
| GET | 获取数据 | 否 |
| POST | 提交数据 | 是 |
| PUT | 更新数据（整体替换） | 是 |
| PATCH | 局部更新 | 是 |
| DELETE | 删除数据 | 是 |
| HEAD | 只获取响应头 | 否 |
| OPTIONS | 查询支持的请求方式 | 否 |
性质
一、GET 请求
特点
- 用于获取数据
- 参数放在 URL 中
- 可被缓存
- 幂等（多次请求结果相同）
示例
axios.get('/api/user/list',{params:{page:1,pageSize:10}})生成的请求：
GET /api/user/list?page=1&pageSize=10 适用场景
- 查询列表
- 查询详情
- 查询分页数据
二、POST 请求
特点
- 用于提交数据
- 数据放在请求体（body）
- 不会被浏览器缓存
- 常用于创建资源
示例
axios.post('/api/user/login',{username:'admin',password:'123456'})数据不会出现在 URL 中。
适用场景
- 登录
- 表单提交
- 创建资源
- 复杂查询条件
三、PUT 请求
特点
- 用于更新资源
- 通常是“整体替换”
- 幂等
示例
axios.put('/api/user',{id:1,name:'张三',phone:'123456'})四、PATCH 请求
特点
- 局部更新
- 只修改某个字段
axios.patch('/api/user/1',{phone:'999999'})五、DELETE 请求
特点
- 删除资源
- 一般通过 id 删除
axios.delete('/api/user',{params:{id:1}})六、GET 与 POST 核心区别总结
| 对比项 | GET | POST |
|---|---|---|
| 参数位置 | URL | Body |
| 安全性 | 较低 | 较高 |
| 数据长度 | 有限制 | 基本无限制 |
| 是否缓存 | 是 | 否 |
| 是否幂等 | 是 | 否 |
| 用途 | 查询 | 提交 |
使用步骤
一、在 Axios 中的标准写法
统一写法（推荐）
axios({method:'post',url:'/api/user/login',data:{username:'admin',password:'123456'}})二、什么时候用 GET？
✔ 查询
✔ 不修改服务器数据
✔ 参数简单
例如：
GET/admin/category/page?page=1&pageSize=10三、什么时候用 POST？
✔ 登录
✔ 提交表单
✔ 创建数据
✔ 查询条件复杂
例如：
POST/admin/employee/login 四、为什么不能乱用 GET？
如果用 GET 做登录：
GET /login?username=admin&password=123456 密码会暴露在浏览器地址栏：
- 不安全
- 会被浏览器记录
- 会被代理服务器记录
所以登录必须用 POST。
五、RESTful 设计规范建议
| 操作 | 方法 |
|---|---|
| 查询列表 | GET |
| 查询单个 | GET |
| 新增 | POST |
| 修改 | PUT |
| 局部修改 | PATCH |
| 删除 | DELETE |
总结
- GET 用于查询，不修改数据
- POST 用于提交，修改服务器数据
- PUT 是整体更新
- PATCH 是局部更新
- DELETE 是删除
- GET 参数在 URL，POST 参数在 body
- 登录、密码、敏感数据一定用 POST
一句话总结：
GET 是“看”，POST 是“改”
参考文献
[1] HTTP/1.1 协议规范
[2] Axios 官方文档
