HTTP 请求传参方式总结

一、GET 请求传参方式

1. Query 参数（URL 拼接）

javascript 复制代码

// 前端调用
axios.get('/api/user', {
    params: {
        id: 123,
        name: '张三',
        age: 18
    }
})
// 实际请求：GET /api/user?id=123&name=张三&age=18

2. 路径参数（RESTful）

javascript 复制代码

// 前端调用
axios.get('/api/user/123/张三')

// 或者动态拼接
const id = 123
const name = '张三'
axios.get(`/api/user/${id}/${name}`)
// 实际请求：GET /api/user/123/张三

3. 混合使用（Query + 路径参数）

javascript 复制代码

// 前端调用
const id = 123
axios.get(`/api/user/${id}`, {
    params: {
        type: 'vip',
        status: 1
    }
})
// 实际请求：GET /api/user/123?type=vip&status=1

二、POST 请求传参方式

1. Request Body（JSON 格式 - 最常用）

javascript 复制代码

axios.post('/api/user', {
    id: 123,
    name: '张三',
    age: 18,
    address: '上海市'
})
// 请求体：{"id":123,"name":"张三","age":18,"address":"上海市"}

2. Query 参数 + Request Body

javascript 复制代码

axios.post('/api/user', {
    name: '张三',
    age: 18
}, {
    params: {
        token: 'abc123',
        version: '1.0'
    }
})
// 请求：POST /api/user?token=abc123&version=1.0
// 请求体：{"name":"张三","age":18}

3. 路径参数 + Request Body

javascript 复制代码

const id = 123
axios.post(`/api/user/${id}`, {
    name: '张三',
    age: 18
})
// 请求：POST /api/user/123
// 请求体：{"name":"张三","age":18}

4. FormData 格式（文件上传）

javascript 复制代码

const formData = new FormData()
formData.append('id', 123)
formData.append('name', '张三')
formData.append('file', fileObject)

axios.post('/api/user', formData, {
    headers: {
        'Content-Type': 'multipart/form-data'
    }
})
// 请求体：multipart/form-data 格式

5. URL-encoded 格式

javascript 复制代码

import qs from 'qs'

axios.post('/api/user', qs.stringify({
    id: 123,
    name: '张三'
}), {
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    }
})
// 请求体：id=123&name=张三

三、PUT 请求（更新数据）

javascript 复制代码

// 路径参数 + Request Body
const id = 123
axios.put(`/api/user/${id}`, {
    name: '李四',
    age: 20
})
// 请求：PUT /api/user/123
// 请求体：{"name":"李四","age":20}

四、DELETE 请求（删除数据）

javascript 复制代码

// 方式1：Query 参数
axios.delete('/api/user', {
    params: {
        id: 123
    }
})
// 请求：DELETE /api/user?id=123

// 方式2：路径参数
axios.delete('/api/user/123')
// 请求：DELETE /api/user/123

// 方式3：Request Body（不推荐，但部分框架支持）
axios.delete('/api/user', {
    data: {
        id: 123
    }
})

五、总结对照表

请求方式	Query参数	路径参数	Request Body
GET	✅ 支持	✅ 支持	❌ 不支持
POST	✅ 支持	✅ 支持	✅ 支持
PUT	✅ 支持	✅ 支持	✅ 支持
DELETE	✅ 支持	✅ 支持	⚠️ 部分支持