html如何get请求参数传递数组,get请求如何传递数组参数

问题

当我们需要通过get方式传递一个数组作为参数 tag:[1,2,3,4]

解决方案

01. 自己处理

// 编辑-(批量)移除测试用例

const delTestCaseUrl = '/htsy-integrated/test-plan/case-del'

axios.get(delTestCaseUrl, {

params: {

planDetailId：this.planDetailId

},

// 序列化数组

paramsSerializer: function(params) {

const keys= params.keys.map(_=>`keys=${_}`).join('&');

return `${keys}` ;

}

}).then((res)=>{

//成功后的处理

});

02. 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'

03. axios配置

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

//只针对get方式进行序列化

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

config.paramsSerializer = function(params) {

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

}

}

}

04. 小程序

let urlQueryString = qs.stringify(options.params, { //使用到qs ,先下载，后引入

addQueryPrefix: true,

allowDots: true,

arrayFormat: 'repeat'

});

myUrl += urlQueryString;

05. 自定义利用字符串原理(虽然随便但这种感觉最方便~~)

// 这里注意使用+''将参数转换成了字符串,实际上就是把arr变成了字符串传出去

const params = {

arr: [1,2,3,4] + '',

list: [1,2,3,4]+ ''

}

一般用vue，所以用第一种和最后一种比较多，哈哈~~