axios举行get跟post哀求的时候，参数封装的不同
在 axios 中，GET 和 POST 哀求的参数通报方式有所不同。详细来说：[*]GET 哀求的参数：通常是通过 URL 的查询字符串来通报参数。
[*]POST 哀求的参数：通常是通过哀求体（body）来通报数据。
以下是怎样在 axios 中编写 GET 和 POST 哀求并通报参数的示例：
1. GET 哀求参数
在 GET 哀求中，参数是通过 URL 查询字符串来通报的，axios 会自动将参数格式化为 URL 查询字符串。
示例：
// 使用 GET 请求
axios.get('https://api.example.com/data', {
params: {
id: 123,
name: 'John Doe',
}
})
.then(response => {
console.log('GET 请求成功', response.data);
})
.catch(error => {
console.error('GET 请求失败', error);
});
解析：
[*]axios.get 中的第二个参数是一个包罗 params 的设置对象。
[*]params 对象中的键值对会被自动转换成查询字符串（例如 id=123&name=John%20Doe），并附加到 URL 上。
最终哀求的 URL 会是：
https://api.example.com/data?id=123&name=John%20Doe
2. POST 哀求参数
在 POST 哀求中，参数是通过哀求体（body）来通报的。可以通过 data 字段来通报。
示例：
// 使用 POST 请求
axios.post('https://api.example.com/data', {
id: 123,
name: 'John Doe',
})
.then(response => {
console.log('POST 请求成功', response.data);
})
.catch(error => {
console.error('POST 请求失败', error);
});
解析：
[*]axios.post 的第二个参数是要发送的哀求体（数据），它将作为哀求的主体通报到服务器。
[*]在这个例子中，{ id: 123, name: 'John Doe' } 会作为 JSON 数据放到哀求体中发送。
3. 带 headers 的 GET 和 POST 哀求
假如你须要通报一些额外的头信息（例如 Authorization、Content-Type 等），可以在 axios 的设置对象中添加 headers 字段。
示例：带 headers 的 GET 哀求
axios.get('https://api.example.com/data', {
params: {
id: 123,
name: 'John Doe',
},
headers: {
'Authorization': 'Bearer your-token',
'Custom-Header': 'CustomHeaderValue',
}
})
.then(response => {
console.log('GET 请求成功', response.data);
})
.catch(error => {
console.error('GET 请求失败', error);
});
示例：带 headers 的 POST 哀求
axios.post('https://api.example.com/data', {
id: 123,
name: 'John Doe',
}, {
headers: {
'Authorization': 'Bearer your-token',
'Content-Type': 'application/json',
}
})
.then(response => {
console.log('POST 请求成功', response.data);
})
.catch(error => {
console.error('POST 请求失败', error);
});
4. 其他常见用法
[*]GET 哀求发送查询字符串：当你须要在 URL 中直接拼接参数时，可以这样做：
axios.get('https://api.example.com/data?id=123&name=John Doe')
.then(response => {
console.log('GET 请求成功', response.data);
})
.catch(error => {
console.error('GET 请求失败', error);
});
[*]POST 哀求发送 form-data 数据：假如你须要发送文件或表单数据，可以使用 FormData 对象。
const formData = new FormData();
formData.append('file', fileInput.files);
formData.append('id', 123);
axios.post('https://api.example.com/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data',
}
})
.then(response => {
console.log('文件上传成功', response.data);
})
.catch(error => {
console.error('文件上传失败', error);
});
总结
[*]GET 哀求：参数通过 params 通报，axios 会自动将其转化为查询字符串，附加在 URL 后面。
[*]POST 哀求：参数通过哀求体（data）通报，通常是 JSON 格式的数据。
[*]假如须要自定义哀求头或其他设置，可以在哀求设置中添加 headers 字段。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]