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

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