昨天在項(xiàng)目中遇到了 前端需要用get請(qǐng)求方式傳遞數(shù)組格式參數(shù)給后端，貼一下解決辦法

解決方案

1.qs插件

qs主要是增加一些安全性的查詢字符串解析和序列化字符串的庫(kù)，qs的更多使用方式可以參考總結(jié)中提供的地址學(xué)習(xí)? ? ? ? ? ??

? ? qs.stringify({a:['b','c']},{arrayFormat:'indices'}) // 輸出結(jié)果：'a[0]=b&a[1]=c'2

? ? ?qs.stringify({a:['b','c']},{arrayFormat:'brackets'}) // 輸出結(jié)果：'a[]=b&a[]=c'3

? ? ?qs.stringify({a:['b','c']},{arrayFormat:'repeat'})? ?// 輸出結(jié)果：'a=b&a=c'4

? ? ?qs.stringify({a:['b','c']},{arrayFormat:'comma'})? ?// 輸出結(jié)果：'a=b,c'

上述我們列舉了qs中的序列化幾種配置，其中{ arrayFormat: 'repeat' }的序列化結(jié)果滿足我們的條件

2 axios配置

axios中有一個(gè)專門對(duì)數(shù)據(jù)進(jìn)行序列化的配置屬性paramsSerializer

paramsSerializer:function(params){returnQs.stringify(params,{arrayFormat:'repeat'})},

2.3 具體配置

我們可以在axios請(qǐng)求攔截器中對(duì)參數(shù)進(jìn)行序列化配置

axios.interceptors.request.use(async(config)=>{

//只針對(duì)get方式進(jìn)行序列化

if(config.method==='get'){

config.paramsSerializer=function(params){

returnqs.stringify(params,{arrayFormat:'repeat'})}}}