在使用axios时,注意到配置选项中包含params和data两者,以为他们是相同的,实则不然。 

 因为params是添加到url的请求字符串中的,用于get请求。服务器并不会读取http body里面的数据,这样我们传递的就是Params里的请求的参数了。(get请求下data不能用) 

  而data是添加到请求体(body)中的,服务器读取http body里面的数据那就需要用POST请求了,POST请求的参数就存放在body;(但是post请求下parms可以在特定情况下使用)

1、get请求参数是带在url上的,必须使用params,这个是肯定的,但是post的请求就不一定了
2、 post请求既可以使用params,也可以使用data
区别是:data是放在body里的,在url中看不见参数,但是使用params的话,说明参数在url里面是能够看见的
可以根据不同的情况使用参数传参

实在区分不开,就简单一句话,你能看见的参数,传参就用params,看不见的参数,就用data
 

Axios post 传参的params 与data 的两种形式(根据java后台接口来选择)

前言
params是添加到url的请求字符串中的,一般用于get请求。
data是添加到请求体(body)中的, 一般用于post请求。

上面,只是一般情况. 其实,post请求也可以使用params方式传值 , 但是get请求没有data方式,本文就来介绍一下post的两种传值方式

Axios 中posts的params与data的两种传参
第一种:data方式

this.$axios({
   url: '/api/user/login' ,
   method: 'post',
   headers: {
      'Content-Type': 'application/json'
   },
   data:{
      username: this.user,
      pwd: this.pwd
   }
}).then((res) => {
  console.log(res)
})

第二种:params方式

this.$axios({
   url: '/api/user/login' ,
   method: 'post',
   headers: {
      'Content-Type': 'application/json'
   },
   params:{
      username: this.user,
      pwd: this.pwd
   }
}).then((res) => {
  console.log(res)
})

注:直接使用post方法,传递的参数为 data 的方式

代码如下:

 

this.$axios.post('/api/user/login',{username: this.user, pwd: this.pwd }),
  {
    headers: {
      'Content-Type': 'application/json'
    }
  }).then((res) => {
  console.log(res)

 
使用场景
一般,情况下都是使用data的传参方式,但有时会发现需要使用params的方式,后台才能获取到数据,这与后台的接口有关,我们前端不能控制。如Java接口

若使用Map接收参数,必须使用 @RequestParam 修饰。但是如果想传list类型的数据,需要使用单独的方法处理(参考链接)。

若使用data传递参数,必须使用一个实体类接收参数,而且需要添加注解 @RequestBody 进行修饰