There is a request in which the parameter has an object array. It was originally a post request, and the interface was changed to a get request later. The parameters of the axios request are naturally changed from data to params.
The request after the first modification is as follows: the format of the request parameter
for the entire path is as follows . The reason why it becomes an array [object attribute in the array]: the value of the object is in this format because the request interception has been done before the processing of the get request array ,code show as below:
if (config.method === 'get') {
// 如果是get请求，且params是数组类型如arr=[1,2]，则转换成arr=1&arr=2
config.paramsSerializer = function(params) {
return qs.stringify(params, {
arrayFormat: 'repeat' })
}
}
But the data format required by the backend is like this array [the subscript of the object in the array]. Object attribute: the attribute value of the object :
it is obviously a bit far away.
Then Baidu searched to see if we could find a suitable processing method from the qs.stringify method.
arrayFormat There are several ways to format arrays:
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'
Then the repeat format was the one I used at the beginning, which was obviously wrong, so I tried others one by one.
The format of indices: The format of
indices seems to be a bit close, but the interface requires .attribute instead of [attribute] , so this processing is not acceptable.
Brackets format:
The brackets format completely removes the subscript! also not
comma format: The format of
comma is to array the object completely. I don't quite understand what kind of data format it is! Of course not.
Therefore, the method of appeal does not work, only the indices format looks similar.
I kept checking the forum and saw the new usage of qs.stringify . Looking at the message, it seems that the data format I want is achieved. The code is as follows:
qs.stringify(data, {
allowDots: true, encode: false })
As a result, the requested parameters really meet the requirements of the backend:
the interface still reports 400, and there are still problems with the requested parameters.
Then I took a screenshot of the parameters on the request path of the two for comparison:
mine:
required by the backend:
it can be clearly seen that the subscripts in the data required by the backend do not use square brackets []. After checking, I realized that URL encoding processing is needed. If you want to know the specific knowledge of URL encoding, you can read Ruan Yifeng 's article about encoding processing.
In the end, it is just one more URL encoding process on top of the original qs.stringify process:
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 }))
}
}
The screenshot of the final request is as follows, which successfully becomes 200 requests:
