axios中post的body与query传参区别及使用总结

axios中post的body与query传参区别及使用总结

1.踩坑描述：

• 最近在vue项目开发中遇到了一个axios请求方面的问题，post请求传单个参数的时候，按照post请求方式传参但是接口报错，在swagger上面测试后发现接口是没有问题的。

2.踩坑分析：

• 其实仔细一点会发现，这个post请求的Parameter Type是query，而一般情况下post请求方式的Parameter Type是 body，在一些极少情况下，post请求的参数体可能会存在body及query共存的情况，所以这其实涉及到post请求的三大部分：header、body、query（简单来说：header：请求头、body：多参数请求体、query：单参数请求体）。后端的接口在不注解的情况下默认是query，所以get请求用query，因为一般传递单个参数，而post请求多用body，因为一般传递多个参数。

2.解决方案1：

•     // 参数情况：（interfaceState：query参数，ID：body参数）
      this.$axios.post(
              `${this.url}updateCompanyState?interfaceState=${state}`, // query参数可以直接拼在url后面
          {
              ID：'123', // body参数
          },
            ).then(res=> {
            console.log(res)
          })
  

3.解决方案2：

• // 参数情况：（interfaceState：query参数，ID：body参数）
  this.$axios({
            url:`${this.url}updateCompanyState`,
            method:'post',
            data:{ID: '123'}, // body参数
            params:{interfaceState:state} // query参数
          }).then(res=> {
            console.log(res)
          })