前端HTTP请求方式之GET、POST与其他请求方法详解
作者：tsumikistep
GET和POST是HTTP协议最常用的两种请求方法,下面这篇文章主要介绍了前端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 官方文档
到此这篇关于前端HTTP请求方式之GET、POST与其他请求方法的文章就介绍到这了,更多相关HTTP GET、POST与其他请求方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！