axios请求默认的content-type是application/json，也就是java后端经常让你把参数放在body中的那种格式 传输的样式是 requestbody
请求的格式如下图
post请求
1、发送json参数，使用axios默认的类型即可，不需要额外的设置
let params: {
table_name:"person",fields:[{
field_name:"name",field_value:"张三"}]
}
axios.post('http://XX.XXX.XXX.XX:8800/demo/db', params).then(res => {
console.log('res', res)
})
请求成功后在network中的表现和上图一样
2、发送form-data类型的参数，此时需要做两点
- 修改请求头的content-type
- 使用qs对参数进行序列化
let params = {
dataKey: key,
filename: 测试
}
axios.post('http://XX.XXX.XXX.XX:8800/demo/dbsql', qs.stringify(params), {
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).then(res => {
console.log('res', res)
})
请求成功后在network中的表现如下
3、需要参数拼接到url后边
// 如果参数比较少，可以直接拼接到url后
axios.post(`http://XX.XXX.XXX.XX:8800/demo/dbsql?dataKey=${
dataKey}&filename=${
filename}`)
// 如果参数比较多，可以如下写
axios.post('http://XX.XXX.XXX.XX:8800/demo/dbsql', null, {
params:{
dataKey: 'key',
filename: '测试',
sql_str: 'select * from person'
...
}
}).then(res => {
console.log('res', res)
})
请求成功后如下图
payload中如下
4、需要同时传两种参数，既要拼接，又要json时，如下
let params = {
dataKey: 'key',
filename: '测试',
sql_str: 'select * from person'
}
axios.post('http://XX.XXX.XXX.XX:8800/demo/dbsql', params, {
params:{
id: 1
}
}).then(res => {
console.log('res', res)
})
// 或者直接将需要拼接的参数写在url后边
axios.post(`http://XX.XXX.XXX.XX:8800/demo/dbsql?id=${
id}`, params)
get请求
注意：axios不能通过get请求发送 json 数据，使用postman可以做到通过get请求发送json数据。
但是通过 axios 框架就不行, 主要是因为axios是对ajax的一个封装。他本身不支持get请求在body体传参。
原生和jquery的ajax是支持的。
建议跟后端沟通，你把json拼在url后面，后端从url的queryString取值。或者使用post请求来传json数据
get请求会默认的把参数拼接到url后边
let params = {
dataKey: 'key',
filename: '测试',
sql_str: 'select * from person'
}
axios.get('http://XX.XXX.XXX.XX:8800/demo/dbsql', {
params: params,
headers: {
}// 注意get方法和post方法设置headers时是不一样的
}).then(res => {
console.log('res', res)
})
// 注意，get方法和post方法的第二个参数的形式是不一样的，headers所在的位置也是不一样的
