实习中get请求中传递数组参数的解决办法
项目上用的axios请求,后端需要接受的参数是在url上拼接上传递的数据类似这里出现一个问题,在axios的params字段上直接传递一个数组和对应的id是不行的,用json.stringify也不不行比如这样在get方法上是不成立的这里需要借用一个插件qs这里是npm地址在axio请求拦截器中,判断请求方法为get的同时,参数里面要有数组对象,这时再采用qs的插件功能, 不然所有的get请求都会
·
记录实习一个月内遇到的开发上遇到的问题
第一个解决get请求中传递数组给后端接受的问题,这个功能虽然没有用上,但是以后遇到了,可以由此解决,当然也可以叫后端改get请求为post。
项目上用的axios请求,后端需要接受的参数是在url上拼接上传递的数据
类似
152.168.12.13/api/getinfo?id=4&item=48&item=56&item=66
这里出现一个问题,在axios的params字段上直接传递一个数组和对应的id是不行的,用json.stringify也不不行
比如
params:{
id:4,
item:[48,56,66]
}
这样在get方法上是不成立的
这里需要借用一个插件qs
这里是npm地址
在axio请求拦截器中,判断请求方法为get的同时,参数里面要有数组对象,这时再采用qs的插件功能, 不然所有的get请求都会采用这个插件,可能会导致报错,这里贴上代码
首先判断参数的所有对象是否为数组方法,遍历对象的所有属性,判断是否为数组,不考虑嵌套数组的问题
let judgArr = function (params) {
let res = false;
if(params instanceof Object){
Object.keys(params).forEach(key =>{
if(Array.isArray(params[key]))
{
res = true;
}
})
}
return res;
}
在请求拦截器中
// 请求拦截器中
instance.interceptors.request.use(
(config) => {
startLoading();
config.headers['Content-Type'] = 'application/json';
let token = getTokenParams();
if (token != {}) {
config.headers['at'] = token.at;
config.headers['ht'] = token.ht;
}
// 如果是get请求,且params不为空,且params里存在数组类型如arr=[1,2],则转换成arr=1&arr=2
if (config.method === 'get' && config.params !== null)
{
if(judgArr(config.params)){
config.paramsSerializer = function(params) {
return qs.stringify(params, { arrayFormat: 'repeat' });
}
}
}
return config;
},
(error) => {
finishLoading();
console.log(error);
return Promise.reject(error);
}
);
这样就解决了get请求中传数组的问题,如有错误欢迎指正
更多推荐
已为社区贡献2条内容
所有评论(0)