记录实习一个月内遇到的开发上遇到的问题

第一个解决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请求中传数组的问题,如有错误欢迎指正

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐