前端新手看这篇就够了：各种接口请求方式全解析！

在前端开发中，我们经常需要向后端发送请求获取数据，比如用户登录、获取列表、提交表单等。而请求方式有很多种，例如 GET、POST、PUT、DELETE，传参方式也五花八门：有的放在 URL，有的放在请求体，有的用 form-data，有的用 JSON…

这篇文章就一次性帮你理清楚各种请求方式的写法、参数位置、格式区别，帮助你彻底搞懂前端怎么写接口！

---

一、最常用的 HTTP 请求方法

方法	说明
GET	获取数据（常用于查询、获取）
POST	提交数据（常用于表单提交、创建资源）
PUT	更新数据（通常整个对象替换）
PATCH	局部更新数据
DELETE	删除数据

---

二、HTTP 与 HTTPS 有什么区别？

协议	区别
HTTP	不加密，速度快，但不安全
HTTPS	加密传输，更安全，浏览器更推荐

现在大多数接口地址都是 https:// 开头的，特别是在生产环境和移动端开发中。

---

三、前端常见的请求方式写法

下面以 axios 为例（推荐使用），展示各种请求写法。你也可以用 fetch，思路类似。

1. GET 请求（参数放在 URL Query 中）

参数写在 URL 上（query string）

axios.get('https://api.example.com/user', {
  params: {
    id: 123,
    name: 'Tom'
  }
})

最终请求地址是：

https://api.example.com/user?id=123&name=Tom

• 参数位置：URL Query
• 参数格式：Key=Value
• 请求体（body）： 没有！

---

2. POST 请求（参数放在请求体 Body 中）

发送 JSON 格式的请求体（最常用）

axios.post('https://api.example.com/login', {
  username: 'Tom',
  password: '123456'
})

请求头默认是：

Content-Type: application/json

• 参数位置：Body
• 参数格式：JSON

---

发送表单格式参数（form-data） 文件上传/传统表单常用

const formData = new FormData();
formData.append('username', 'Tom');
formData.append('avatar', file); // 例如上传图片

axios.post('https://api.example.com/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
});

• 参数位置：Body
• 参数格式：form-data
• 特点：可上传文件，支持键值对 + 文件

---

发送 URL 编码格式（x-www-form-urlencoded）

import qs from 'qs';

axios.post('https://api.example.com/form', qs.stringify({
  name: 'Tom',
  age: 25
}), {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
});

最终请求体是：

name=Tom&age=25

• 参数位置：Body
• 参数格式：key=value&key=value

---

3. PUT / PATCH 请求（更新数据）

axios.put('https://api.example.com/user/123', {
  name: 'Tom',
  age: 30
});

• 和 POST 类似，参数通常写在 Body 中
• 请求头是 Content-Type: application/json

---

4. DELETE 请求（参数也可以写在 URL）

axios.delete('https://api.example.com/user/123');

也可以带参数：

axios.delete('https://api.example.com/user', {
  params: { id: 123 }
});

---

四、不同参数格式总结

参数格式	适用请求	说明
params （Query）	GET、DELETE	放在 URL 后面，key=value
data（JSON）	POST、PUT、PATCH	放在请求体中，格式是 JSON
form-data	POST	适合上传文件，或表单提交
x-www-form-urlencoded	POST	类似 HTML 表单提交的格式，传统后端常用

---

五、示例对比（完整对照表）

请求方式	参数位置	参数格式	示例
GET	URL 查询参数	?id=1	axios.get('/api?id=1')
POST	请求体	JSON	axios.post('/api', { name: 'Tom' })
POST	请求体	form-data	axios.post('/upload', formData)
POST	请求体	x-www-form-urlencoded	axios.post('/form', qs.stringify({...}))
PUT / PATCH	请求体	JSON	axios.put('/user/1', {...})
DELETE	URL 或 Query	key=value	axios.delete('/api?id=1')

---

六、常见请求库推荐

• axios 功能强大，社区活跃
• 原生 fetch 原生支持，无需依赖（但兼容性略差）
• uni.request() 用于 uniapp、小程序

---

七、注意事项小贴士

• GET 请求不建议传太多参数（URL 有长度限制）
• 上传文件用 form-data
• 遇到跨域问题请了解：什么是跨域？如何解决？
• 使用 POST 时不要把参数写在 URL 上！

---

八、总结一句话

记住：GET 用 params，POST 用 body；JSON 最通用，form-data 用于上传；Content-Type 决定格式。

如果你是初学者，希望这篇文章能帮你彻底理清前端接口请求的套路和姿势！

觉得有帮助就点个赞 / 收藏吧