前端新手看这篇就够了：各种接口请求方式全解析！
在前端开发中，我们经常需要向后端发送请求获取数据，比如用户登录、获取列表、提交表单等。而请求方式有很多种，例如 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=valuedata（JSON）POST、PUT、PATCH放在请求体中，格式是 JSONform-dataPOST适合上传文件，或表单提交x-www-form-urlencodedPOST类似 HTML 表单提交的格式，传统后端常用
五、示例对比（完整对照表）
请求方式参数位置参数格式示例GETURL 查询参数?id=1axios.get('/api?id=1')POST请求体JSONaxios.post('/api', { name: 'Tom' })POST请求体form-dataaxios.post('/upload', formData)POST请求体x-www-form-urlencodedaxios.post('/form', qs.stringify({...}))PUT / PATCH请求体JSONaxios.put('/user/1', {...})DELETEURL 或 Querykey=valueaxios.delete('/api?id=1')
六、常见请求库推荐
axios 功能强大，社区活跃原生 fetch 原生支持，无需依赖（但兼容性略差）uni.request() 用于 uniapp、小程序
七、注意事项小贴士
GET 请求不建议传太多参数（URL 有长度限制）上传文件用 form-data遇到跨域问题请了解：什么是跨域？如何解决？使用 POST 时不要把参数写在 URL 上！
八、总结一句话
记住：GET 用 params，POST 用 body；JSON 最通用，form-data 用于上传；Content-Type 决定格式。
如果你是初学者，希望这篇文章能帮你彻底理清前端接口请求的套路和姿势！
觉得有帮助就点个赞 / 收藏吧
