关于axios的get、post请求参数的记录

axios请求默认的content-type是application/json,也就是java后端经常让你把参数放在body中的那种格式 传输的样式是 requestbody

请求的格式如下图
关于axios的get、post请求参数的记录_第1张图片

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中的表现如下
关于axios的get、post请求参数的记录_第2张图片
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)
 })

请求成功后如下图
![在这里插入图片描述](https://img-blog.csdnimg.cn/9979ad2f247a481a909b9139a3fa8cb7.png
payload中如下
关于axios的get、post请求参数的记录_第3张图片

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)

关于axios的get、post请求参数的记录_第4张图片

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所在的位置也是不一样的

关于axios的get、post请求参数的记录_第5张图片

你可能感兴趣的:(javascript,前端,java)