有个请求,里面的参数有对象数组的情况,原来是 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 }))
    }
  }

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

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐