关于使用Axios的一些心得

原创已于 2025-08-16 20:58:09 修改 · 714 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2025-05-11 20:04:22 首次发布

Axios 请求参数传递详解

请求参数位置的区别

GET 请求

参数位置：URL 查询字符串（属于 HTTP 请求头部分）
特点：
- 参数会显示在 URL 中
- 有长度限制（约 2KB）
- 会被浏览器缓存、记录在历史记录中
- 适合非敏感数据和小数据量传输

POST 请求

参数位置：请求体（Request Body）
特点：
- 不会显示在 URL 中
- 没有严格的大小限制
- 不会被缓存或记录在历史记录中
- 适合敏感数据和大数据量传输

Axios 参数传递的正确方式

1. GET 请求参数传递

方式一：使用 `params` 配置

axios.get('/api/user', {

params: {

id: 123,

name: 'John' }

})

// 实际请求URL: /api/user?id=123&name=John

方式二：直接拼接 URL

axios.get(`/api/user?id=${id}&name=${name}`)

错误示例（避免这样写）：

// 错误1：嵌套 data 对象
axios.get('/api/user', {
params: {
data: { id: 123, name: 'John' }
}
})
// 实际请求URL: /api/user?data[id]=123&data[name]=John (不符合常规后端接收方式)

// 错误2：语法错误
axios.get('/api/user', {
params{ id: 123 } // 这不是合法的 JavaScript 语法
})

2. POST 请求参数传递

方式一：直接作为第二个参数

javascript

axios.post('/api/user', {
username: 'john',
password: '123456'
})

第二个参数会识别成一个json,直接塞到请求体里,如果想放在请求头中，这样写

axios.post('/api/user', null,{

params:{
username,
password，

}
})

方式二：使用 `data` 配置

axios({
method: 'post',
url: '/api/user',
data: {
username: 'john',
password: '123456'
}
})

方式三：FormData（适合文件上传）

const formData = new FormData()
formData.append('username', 'john')
formData.append('avatar', fileInput.files[0])

axios.post('/api/user', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
})

错误示例（避免这样写）：

// 错误1：将 POST 参数放在 params 中
axios.post('/api/user', null, {
params: {
    username: 'john',
    password: '123456'
}
})

// 这实际上会将参数附加到 URL 上，而不是放在请求体中

// 错误2：嵌套 data 对象
axios.post('/api/user', {
data: {
    username: 'john',
    password: '123456'
}
})
// 后端需要额外处理 data 包装层

综合配置示例

axios({
method: 'post', // 请求方法
url: '/user/12345', // 请求URL
data: { // POST/PUT/PATCH 请求体数据
    firstName: 'Fred',
    lastName: 'Flintstone'
},
params: { // GET 请求URL参数（如果是POST请求，这个配置通常不需要）
    token: 'abc123' // 少数情况下POST请求也需要URL参数
},
headers: { // 自定义请求头
    'X-Requested-With': 'XMLHttpRequest',
    'Authorization': 'Bearer token123'
},
timeout: 5000, // 超时设置
responseType: 'json' // 响应数据类型
})

后端接收方式对应关系

GET 请求参数接收

Spring Boot:

@GetMapping("/user")
public ResponseEntity<User> getUser(
@RequestParam Integer id,
@RequestParam String name) {
// ...
}

POST 请求 JSON 数据接收

Spring Boot:

@PostMapping("/user")
public ResponseEntity<User> createUser(
@RequestBody UserDto userDto) {
// ...
}

POST 表单数据接收

Spring Boot:

@PostMapping("/user")
public ResponseEntity<User> createUser(
@RequestParam String username,
@RequestParam String password) {
// ...最佳实践建议

敏感数据（如登录凭证）一定要用 POST 请求
大数据量传输使用 POST 请求
RESTful API 设计：
- 获取资源用 GET + URL 参数
- 创建资源用 POST + 请求体
- 更新资源用 PUT/PATCH + 请求体
- 删除资源用 DELETE
类型安全（TypeScript）：

interface User {
id: number
name: string
email: string
}

// 明确指定请求和响应类型
axios.post<User>('/api/user', {
name: 'John',
email: 'john@example.com'
}).then(response => {
const user: User = response.data
// ...
})
错误处理：

axios.post('/api/user', data)
.then(response => {
    // 处理成功响应
})
.catch(error => {
    if (error.response) {
      // 服务器返回了错误状态码
      console.log(error.response.status)
      console.log(error.response.data)
    } else if (error.request) {
      // 请求已发出但没有收到响应
      console.log(error.request)
    } else {
      // 其他错误
      console.log('Error', error.message)
    }
})