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

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

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查看 参数格式如下图:

image.png

由图可见 参数是直接拼接在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)
  });

image.png

如下:

此处注意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
  });

如图:

image.png

这种传参方式不会显式出现在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));

打印结果:

image.png

5.qs.stringify()

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

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

打印结果:

image.png

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);

打印结果如下图:

image.png

JSON.stringify()的作用是将对象转换成JSON字符串，而JSON.parse()是将JSON字符串转换成一个对象。也就是说，如果我们用JSON.stringify()将一个对象变成了字符串，那么使用JSON.parse()将字符串还原成对象。

由此可以得出:

qs.parse() qs.stringify()通常是用来处理url
JSON.stringify() JSON.parse()是处理json