前端怎么传数组格式参数params[beginTime]

前端如何传参JSON格式和数组格式的参数

后端需要前端传参数组的格式为

1. params[beginTime]: 2024-06-26
2. params[endTime]: 2024-06-27

但是前端axios默认传参对象的格式

params: {"beginTime":"2024-06-18","endTime":"2024-06-28"}

 那么问题来了 

前端如何将对象格式数据以单独的查询参数的形式列出来,再传递给后端呢？

 var data={ 
  			pageNum:1,
        pageSize:20
       params:{
           beginTime: '2024-06-18',
           endTime: '2024-06-28'
       }
 }

首先解析一下这两种请求地址，再看看区别

这两种格式的请求URL在参数组织方式上有所不同，主要体现在查询字符串（query string）中如何表示params对象。

1. {"beginTime":"2024-06-18","endTime":"2024-06-28"}格式：

/list?_t=1717466630&pageNum=1&pageSize=20¶ms=%7B%22beginTime%22:%222024-06-18%22,%22endTime%22:%222024-06-28%22%7D

在这个URL中，params是一个单独的参数，其值是一个JSON字符串 %7B%22beginTime%22:%222024-06-18%22,%22endTime%22:%222024-06-28%22%7D。这是URL编码后的{"beginTime":"2024-06-18","endTime":"2024-06-28"}，表示一个包含beginTime和endTime键值对的对象。服务器端需要解码这个字符串并解析为JSON对象来获取参数。

2. params[beginTime]格式：

/extraCoa/list?pageNum=1&pageSize=20¶ms[beginTime]=2024-06-18¶ms[endTime]=2024-06-28

在这个URL中，params是一个包含多个参数的键，每个参数以params[]的形式出现，比如params[beginTime]和params[endTime]。这种方式直接将params对象的键值对以单独的查询参数的形式列出来，服务器端可以直接解析这些参数，无需解码和解析JSON。

两种格式在处理上略有不同：

• JSON格式的params在服务器端解析可能需要额外的步骤，例如解码URL编码的字符串，然后将其转换为JSON对象。
• 数组格式的params则可以直接映射到服务器端的数据结构，不需要额外的JSON解析，但可能需要特殊处理来组合这些分散的键值对。

为什么后端要用数组格式的参数

对于后端来说，处理查询参数的便捷性往往取决于后端框架或库的支持情况以及个人偏好。但一般来说，第二种格式（键值对展开的形式）可能对许多后端开发者来说更为直观和方便，原因如下：

• 直接映射: 第二种格式中，每个参数都是独立的键值对，如params[beginTime]=2024-06-18，大多数现代Web框架（如Spring Boot, Django, Express.js等）可以直接将这些参数映射到后端方法的参数对象中相应的字段，无需额外的解析工作。
• 易于理解和调试: 这种格式在查看请求时更清晰，每个参数的意义一目了然，便于调试和理解请求的内容。
• 减少错误: 相比于需要解码和解析JSON字符串的第一种格式，第二种格式减少了出错的可能性，比如JSON格式错误等。

数组格式传参实现方法

在axios的的请求拦截器里将数据进行处理

// request interceptor
service.interceptors.request.use(config => {
   //前面删除了其他处理的代码
   
  
    //在最后 get请求映射params参数 。我这需要在get请求并且有params参数再处理
    if (config.method=='get' && config.params?.params) {
        let url = config.url + '?' + tansParams(config.params);
        url = url.slice(0, -1);
        config.params = {};
        config.url = url;
    }
   
return config
  return config
},(error) => {
  return Promise.reject(error)
})

tansParams 方法

tansParams(params) {
	let result = ''
	for (const propName of Object.keys(params)) {
		const value = params[propName];
		var part = encodeURIComponent(propName) + "=";
		if (value !== null && typeof (value) !== "undefined") {
			if (typeof value === 'object') {
				for (const key of Object.keys(value)) {
					if (value[key] !== null && typeof (value[key]) !== 'undefined') {
						let params = propName + '[' + key + ']';
						var subPart = encodeURIComponent(params) + "=";
						result += subPart + encodeURIComponent(value[key]) + "&";
					}
				}
			} else {
				result += part + encodeURIComponent(value) + "&";
			}
		}
	}
	return result
}