前端get请求参数包含数组的情况

news2024/10/5 15:04:15

前端get请求参数包含数组的情况

- 问题描述
- 解决办法
- 文章参考

问题描述

当我们使用post传数组参数的时候，是没有问题的，可以不经过参数处理即可正常传参，但是当我们使用get请求传数组参数的时候，会出现下图这样的情况：

ajax请求方法

// ajax请求方法
export function getDataApi(params) {
  return axios.request({
    url: `${prefix}/transferFee/page`,
    method: "GET",
    params,
  });
}

调用请求

import { getDataApi } from '@/api/index.js';

created() {
	const params = {
		siteCode: '880',
		objectType: '',
		objectName: '',
		offerName: '',
		productCode: '',
		effectiveStatus: '',
		offerStatus: '',
		offerCode: '',
		subjectCodes: ['160', '161', '162'],
		pageNum: 1,
		pageSize: 10,
	}
	getDataApi(params).then((res) => {
		console.log('请求成功', res)
	})
}

之后我们控制台查看请求情况，就会发现当get请求按照这样的方式传递数组参数的时候，查询字符串会错乱，出现这样的情况
http://localhost:5173/basic/cmanager/transferFee/page?siteCode=880&objectType=&objectName=&offerName=&productCode=&effectiveStatus=&offerStatus=&offerCode=&subjectCodes[]=160&subjectCodes[]=161&subjectCodes[]=162&pageNum=1&pageSize=10

数组参数subjectCodes: ['160', '161', '162']被分割成了subjectCodes[]=160&subjectCodes[]=161&subjectCodes[]=16
在这里插入图片描述
这样后台是无法正确接受数组参数的，因此我们需要对get请求的数组参数做特殊的处理。

解决办法

主要思路就是数组参数序列化，如果我们使用的是axios插件，那么可以对axios的paramsSerializer属性进行处理，使得数组参数能够序列化

方法:一：自行写回调函数对数组参数进行处理

// ajax请求方法
export function getDataApi(params) {
  return axios.request({
    url: `${prefix}/transferFee/page`,
    method: "GET",
    params,
    // 处理git请求传subjectCodes数组的问题，对数组进行序列化
	paramsSerializer: function(params) {
  		let arr = [];
  		const {subjectCodes, ...rest} = params;
  		for (let key in rest) {
    		arr.push(`${key}=${rest[key]}`)
  		}
  		if (subjectCodes) {
    		let subjectCodes=params.subjectCodes.map(_=>`subjectCodes=${_}`).join('&');
    		arr.push(subjectCodes)
  		}
  		const paramsStr = arr.join('&');
  		console.log(paramsStr);
  		return paramsStr;
	}
  });
}

方法二：使用qs插件对数组参数进行处理

qs插件：

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

axios配置：

axios.interceptors.request.use(async (config) => {
//只针对get方式进行序列化
 if (config.method === 'get') {
   config.paramsSerializer = function(params) {
     return qs.stringify(params, { arrayFormat: 'repeat' })
   }
 }
}

如果是小程序使用qs

let urlQueryString = qs.stringify(options.params, {   //使用到qs ,先下载，后引入
  addQueryPrefix: true,
  allowDots: true,
  arrayFormat: 'repeat'
});
myUrl += urlQueryString;