axios 几种方法传参差别
时间: 2025-01-12 16:46:57 浏览: 39
### Axios 不同传参方法的差异与用法比较
#### GET 请求
GET 方法用于向服务器请求资源。此方法通过 URL 查询字符串传递参数,因此不适合传输大量数据或敏感信息。
```javascript
// 使用 params 对象来设置查询参数
axios.get('/api/data', {
params: {
id: 1,
name: 'example'
}
})
.then(response => console.log(response.data))
.catch(error => console.error('Error:', error));
```
由于 GET 请求不支持在请求体中携带复杂结构的数据,如 JSON 或 XML[^3]。
#### POST 请求
POST 方法允许客户端向指定资源提交要处理的数据。这些数据通常放在 HTTP 请求的消息体内,并可以采用多种形式,比如表单编码、JSON 和二进制流等。
```javascript
// 发送 JSON 数据作为请求体的一部分
axios.post('/api/submit', {
title: "foo",
body: "bar"
}, {
headers: {
'Content-Type': 'application/json'
}
})
.then(response => console.log(response.data))
.catch(error => console.error('Error:', error));
```
需要注意的是,在不同的 Axios 版本之间,默认的内容类型可能有所不同,这可能导致一些兼容性问题[^2]。
#### PUT/PATCH 请求
PUT 和 PATCH 类似于 POST,主要用于更新现有资源。它们也能够接受多种格式的数据作为负载。
```javascript
// 更新整个对象 (PUT)
axios.put('/api/item/1', {
key: 'value',
})
// 部分修改对象属性 (PATCH)
axios.patch('/api/item/1', {
newField: 'newValue'
});
```
#### DELETE 请求
DELETE 请求用来删除指定位置上的资源。虽然它也可以带有额外的信息(例如确认令牌),但是大多数情况下不需要任何主体内容。
```javascript
axios.delete('/api/resource/id')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.error(error);
});
```
对于文件上传操作,则需特别注意 Content-Type 设置以及 FormData API 的应用:
```javascript
const formData = new FormData();
formData.append('file', fileInput.files[0]);
axios({
method: 'post',
url: '/upload',
data: formData,
config: { headers: {'Content-Type': 'multipart/form-data' }}
})
.then((res)=>{
console.log(res.statusText);
}).catch(err=>console.warn(err));
```
阅读全文
相关推荐


















