首页 > 其他分享 >get请求传对象数组参数

get请求传对象数组参数

时间:2022-09-05 22:02:15浏览次数:93  
标签:qs 请求 get stringify 数组 格式

有个请求,里面的参数有对象数组的情况,原来是 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,数组,格式
From: https://www.cnblogs.com/wjsqqj/p/16659758.html

相关文章

  • 977 有序数组的平方
    题目977有序数组的平方给你一个按非递减顺序排序的整数数组nums,返回每个数字的平方组成的新数组,要求也按非递减顺序排序。示例1:输入:nums=[-4,-1,0,3,10]输......
  • Directory.GetFiles、GetDirectories 的三个参数
    Directory.GetFiles、GetDirectories的三个参数Directory.GetFiles获取指定目录下的文件路径。第一个参数是目录路径。第二个参数默认是取所有文件,可以指定通配符限定,......
  • 获取指定路径文件列表 递归 C# Directory.GetDirectories(path)或Directory.GetFil
    C#Directory.GetDirectories(path)或Directory.GetFiles(path)获取文件时如果是根目录时有隐藏文件则报错的处理C#Directory.GetDirectories(path)或Directory.GetF......
  • TS创建接口和接口类型数组,并统一导入后引用
    在app.ts中引用import{users,IRoute,IUser,routes}from"./data";在index.ts中统一导入后导出export*from"./routes";export*from"./users";importro......
  • E10——常用函数——GetSumProperty
    GetSumProperty(path,汇总字段,参数列表,参数值列表) 举例:【维护销售订单】单身加入虚字段“现有库存量”Context['ITEM_WAREHOUSE'].GetSumProperty('','INVENTORY_QTY'......
  • 伪数组和数组
    区别伪数组的类型不是Array,而是Object,而数组类型是Array。 伪数组可以使用的length属性查看长度,也可以使用[index]获取某个元素,但是不能使用数组的其他方法,也不能改变......
  • 数组:有序数组的平方
    给你一个按非递减顺序排序的整数数组nums,返回每个数字的平方组成的新数组,要求也按非递减顺序排序。 示例1:输入:nums=[-4,-1,0,3,10]输出:[0,1,9,16,100]解释:平......
  • CSRF跨站点请求伪造(Cross Site Request Forgery)攻击
    CSRF跨站点请求伪造(CrossSiteRequestForgery)和XSS攻击一样,有巨大的危害性,就是攻击者盗用了用户的身份,以用户的身份发送恶意请求,但是对服务器来说这个请求是合理的,这样就......
  • 后缀数组
    https://oiwiki.org/string/sa/性质1:\(sa[rk[i]]=rk[sa[i]]\)翻译一下,即记i的排名为\(k\),\(sa[k]=i\),排名为\(i\)的后缀的排名为\(i\)。性质2:$\forallx\in......
  • Day06__数组
    数组数组的定义数组的声明和创建packagearray;//数组的声明和创建publicclassDemo01{publicstaticvoidmain(String[]args){int[]nums;//......