axios 1.x 0.27 请求参数数组序列化

2022-11-22 09:03:23 浏览数 (1)

axios从0.27升级到1.x版本后不再依赖qs,请求参数序列化方式有所变化

方式1 括号(默认)

用括号标识数组参数

效果

http://url?myParam[]=1&myParam[]=2&myParam[]=3

1.x版本代码

代码语言:javascript复制
axios.get('http://url',{
	params: {
		myParam: [1,2,3]
	},
    paramsSerializer: {
        indexes: false
    }
})

0.27版本代码

代码语言:javascript复制
axios.get('http://url',{
	params: {
		myParam: [1,2,3]
	},
    paramsSerializer:(params) => qs.stringify(params, { arrayFormat: 'brackets' }) 
})

方式2 索引

方法1括号中额外增加元素索引

效果

代码语言:javascript复制
http://url?myParam[0]=1&myParam[1]=2&myParam[2]=3

1.x版本代码

代码语言:javascript复制
axios.get('http://url',{
	params: {
		myParam: [1,2,3]
	},
    paramsSerializer: {
        indexes: true
    }
})

0.27版本代码

代码语言:javascript复制
axios.get('http://url',{
	params: {
		myParam: [1,2,3]
	},
    paramsSerializer:(params) => qs.stringify(params, { arrayFormat: 'indices' }) 
})

方式3 重复

直接重复参数

效果

代码语言:javascript复制
http://url?myParam=1&myParam=2&myParam=3

1.x版本代码

代码语言:javascript复制
axios.get('http://url',{
	params: {
		myParam: [1,2,3]
	},
    paramsSerializer: {
        indexes: null
    }
})

0.27版本代码

代码语言:javascript复制
axios.get('http://url',{
	params: {
		myParam: [1,2,3]
	},
    paramsSerializer:(params) => qs.stringify(params, { arrayFormat: 'repeat' }) 
})

方式4 都好分割

使用逗号分隔数组元素值,在axios 1.x版本中默认不再支持,如需使用可自行添加qs依赖

效果

代码语言:javascript复制
http://url?myParam=1,2,3

1.x版本代码

代码语言:javascript复制
axios.get('http://url',{
	params: {
		myParam: [1,2,3]
	},
    paramsSerializer: {
        encode: (params) => qs.stringify(params, { arrayFormat: 'comma' })
    }
})

0.27版本代码

代码语言:javascript复制
axios.get('http://url',{
	params: {
		myParam: [1,2,3]
	},
    paramsSerializer:(params) => qs.stringify(params, { arrayFormat: 'comma' }) 
})

0 人点赞