get请求传对象数组参数

2022-09-05 22:01:44 阅读：241 来源： 互联网

有个请求，里面的参数有对象数组的情况，原来是 post 请求，后面接口改成 get 请求，那用 axios 请求的参数自然也从 data 改为 params。

第一次修改后的请求情况是这样的：
整个路径
在这里插入图片描述
请求参数格式如下

之所以变成数组[数组里的对象属性]:对象的值这种格式，是因为之前有做请求拦截 get 请求数组的处理，代码如下：

if (config.method === 'get') {
    // 如果是get请求，且params是数组类型如arr=[1,2]，则转换成arr=1&arr=2
    config.paramsSerializer = function(params) {
      return qs.stringify(params, { arrayFormat: 'repeat' })
    }
  }

但后端要求的数据格式却是这样的数组[对象在数组中的下标].对象属性:对象的属性值：
在这里插入图片描述
很明显差的有点远啊。
然后百度了下，看看能不能从 qs.stringify 方法中找到合适的处理方式。
arrayFormat 数组格式化的方式有如下几个：

qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' })
// 输出结果：'a[0]=b&a[1]=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' })
// 输出结果：'a[]=b&a[]=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' })
// 输出结果：'a=b&a=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'comma' })
// 输出结果：'a=b,c'

然后 repeat 的格式就是我一开始用的，很明显不对，于是就一个一个去试其它的了。
indices格式：
在这里插入图片描述
indices 的格式看似有点接近了，但接口要的是 .属性，而不是 [属性]，所以这个处理也不行。

brackets格式：
在这里插入图片描述
brackets 的格式就完全把下标给去掉了嘛！也不行

comma格式：
在这里插入图片描述
comma 的格式就完全是把对象数组化，看不太明白是怎么个数据格式！当然也不行。
所以上诉的方法都不行，只有 indices 格式是看着差不多的。

在不断去查论坛，看到了新的 qs.stringify 用法，看留言貌似给做到我想要的数据格式，代码如下：

qs.stringify(data, { allowDots: true, encode: false })

结果请求的参数真的是完全符合后端要求的那种：
在这里插入图片描述
可接口还是报400，请求参数还是有问题。

然后截图了两者的请求路径上的参数进行比对：
我的：
在这里插入图片描述
后端要求的：

可以明显的看到，后端要求的数据中下标是没用中括号 [] 的。后来查了下，才知道需要做 URL编码处理，想了解具体的 URL编码知识，可以看阮一峰的关于编码处理这个文章。
最后也只是在原来 qs.stringify 的处理上再多一个URL编码处理即可：

if (config.method === 'get') {
    // 如果是get请求，且params是数组类型如arr=[1,2]，则转换成arr=1&arr=2
    config.paramsSerializer = function(params) {
      return encodeURI(qs.stringify(params, { allowDots: true, encode: false }))
    }
  }

或者

JSON.stringify([{column: 'createDate', asc: 'true'}])

encodeURI(JSON.stringify(list),'utf-8')

JSON.parse(JSON.stringify(props.selectKeys))


或者
encodeURIComponent('url路径地址')
encodeURIComponent()：因为在作用与url当作参数传递的时候，如参数出现空格这样的特殊字段，后台只可以读取到空格前的内容，后面内容丢失，造成数据读取失败，但是如果用encodeURIComponent()包裹一下，那会将这些特殊字符进行转义，这样后台就可以成功读取了，所以encodeURIComponent()用于url作为参数传递的场景中使用

最后请求的截图如下，成功变成200请求：
在这里插入图片描述

标签：qs,请求,get,stringify,数组,格式
来源： https://www.cnblogs.com/wjsqqj/p/16659758.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

get请求传对象数组参数