前端HTTP请求方式之GET、POST与其他请求方法详解

前言

在前后端分离开发中，最常见的问题之一就是：

• GET 和 POST 有什么区别？
• PUT、DELETE、PATCH 是干什么的？
• 为什么有的接口用 POST 不能用 GET？
• 为什么有时候 GET 能成功，POST 却报错？

本文系统整理 HTTP 请求方式的区别、原理与使用场景，结合 Vue + Axios 实际开发说明。

定义概念 + 缩写

一、HTTP 是什么？

HTTP（HyperText Transfer Protocol）

超文本传输协议，是浏览器与服务器之间通信的规则。

二、常见请求方式

性质

一、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 核心区别总结

使用步骤

一、在 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 设计规范建议

总结

1. GET 用于查询，不修改数据
2. POST 用于提交，修改服务器数据
3. PUT 是整体更新
4. PATCH 是局部更新
5. DELETE 是删除
6. GET 参数在 URL，POST 参数在 body
7. 登录、密码、敏感数据一定用 POST

一句话总结：

GET 是“看”，POST 是“改”

参考文献

[1] HTTP/1.1 协议规范
[2] Axios 官方文档

到此这篇关于前端HTTP请求方式之GET、POST与其他请求方法的文章就介绍到这了,更多相关HTTP GET、POST与其他请求方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论