Bootstrap

vue中axios传参数组问题(data和params区别)

简介:axios传参一般分两种方式,一种是用data,一种是用params,至于到底用data还是params这取决与后端

1、一般后端接收参数时、使用@RequestBody就代表接收的是一个类(对象),此时前端应该用data传参。

2、而后端用@RequestParam就代表单个数值(比如一个字符串,一个int类型数据等)。此时前端应该用params传参。

这是data和params的区别,然后当参数是数组时,有一种情况比较特别,params和数组结合时的特殊情况。当params传参时,这个参数实际上是接在地址的尾部的,比如我传的参数是a=3,请求的地址实际上是http:***.***.***?a=3.

所以基于这个知识就知道特殊之处在哪,比如你用params传一个数组a=[1,2],但是地址栏能给你连接一个【】符号吗?答案hi不能的,浏览器只能识别http:***.***.***?a=1&a=2这种形式,因此,用params传参就需要将理论上有【】符号的网址变成后面&符号连接的地址。

既然原因说清楚了,接下来,需要借助一个小工具使得数组序列化(用&链接参数)

1、安装一个小包

npm install qs

2、在页面引入qs

import qs form 'qs'

3、接下来便可以直接用了(就好啦!!!)

 var res = [3, 12];
   return request({
    url: "createCourse",
    method: "post",
    params: {
      experimentIdGroup: res,
    },
    paramsSerializer: function (params) {
      return qs.stringify(params, { arrayFormat: "repeat" });
    },
  });

!!!结尾给大家展示一下qs.stringfy序列化的可视化结果

console.log(qs.stringify({ a: [1, 2, 3] }, { indices: false }));
  

 完美的解决啦!

 

;