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

下雨打伞干嘛

已于 2024-03-19 14:53:10 修改

阅读量8.1k

点赞数 4

文章标签： javascript 前端 servlet

于 2023-05-28 20:06:52 首次发布

原文链接：https://www.jianshu.com/p/7c7c8f0fafc2

版权

Axios发送请求时params和data的区别
params是添加到url的请求字符串中的，用于get请求
data是添加到请求体（body）中的，用于post请求

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

解决方案1：

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

解决方案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)
  })

请求参数方式类型介绍
1.Query String Parameters
这个中类型,常见于Get请求,参数会以url string的形式进行传递.
我在Vue中使用 axios 来完成 ajax 请求

//query String Parameters传参 后台需要注意 java.lang.IllegalArgumentException异常(原因是[]{}无法解析,可参考本文其他博客)
  this.axios({
    method: "get",
    url: "http://localhost:8088/lianxi/api/wzxlianxi/v1/queryUserss",
    params: this.formInlines
  });

可以在浏览器通过F12查看参数格式如下图:
在这里插入图片描述
由图可见参数是直接拼接在URL上的。即?后的字符串则为其请求参数，并以&作为分隔符.

2.Form Data
Form Data传参格式,顾名思义就是常见的 Form表单;
此处qs.stringify() 将对象序列化成URL的形式，以&进行拼接下面会讲到

  //form data传参
  this.axios({
    method: "post",
    url: "http://localhost:8088/lianxi/api/wzxlianxi/v1/queryUserss",
    data: qs.stringify(this.formInlines)
  });

在这里插入图片描述
如下:
此处注意Content-Type ;当发起一次POST请求时，若未指定Content-Type，则默认Content-Type为application/x-www-form-urlencoded。即参数会以Form Data的形式进行传递，不会显式出现在请求url中。

3.Request Payload
request payload是vue默认的请求参数方式,也就是一个json串,后台在接收的时候可以使用String 来接受这个json然后在转成Map,

  // request payload传参可以使用Requestbody 接收
  this.axios({
    method: "post",
    url:
      "http://localhost:8088/lianxi/api/wzxlianxi/v1/queryUsersspayload",
    data: this.formInlines
  });

如图:
在这里插入图片描述
这种传参方式不会显式出现在URL中,这里需要注意的是Content-Type和Form Data的不一样;

qs的使用介绍
qs是一个npm仓库所管理的包,可通过npm install qs命令进行安装;在使用时在.vue文件中引入: import qs from “qs”;然后直接使用;
下面详细介绍qs.parse() qs.stringify()的使用方法以及和Json.stringify() Json.parse() 的区别

4.qs.parse()
qs.parse()将URL解析成对象的形式

  //qs的使用
  let str = 'method=queryUser&name=admin&password=123456';
  console.log(qs.parse(str));

打印结果:
在这里插入图片描述

5.qs.stringify()
qs.stringify()将对象序列化成URL的形式，以&进行拼接

let obj = {
        method: "queryUser",
        name: "admin",
        password: "123456",
        time: "2020-02-02"
      };
      console.log(qs.stringify(obj));

打印结果:
在这里插入图片描述
6.qs.parse() qs.stringify()和JSON.stringify() JSON.parse()使用的的区别:
先看代码:

  let str = "method=queryUser&name=admin&password=123456";
  let changeStr = qs.parse(str);
  console.log(changeStr);
  console.log(typeof changeStr);

  let obj = {
    method: "queryUser",
    name: "admin",
    password: "123456",
    time: "2020-02-02"
  };
  let changeObj = qs.stringify(obj);
  console.log(changeObj);
  console.log(typeof changeObj);
  let changeObj1 = JSON.stringify(obj);
  console.log(changeObj1);
  console.log(typeof changeObj1);
  let changeObj2 = JSON.parse(changeObj1);
  console.log(changeObj2);
  console.log(typeof changeObj2);