前端get请求参数包含数组的情况-阿里云开发者社区

前端get请求参数包含数组的情况

2024-03-08 124

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 前端get请求参数包含数组的情况

问题描述

当我们使用post传数组参数的时候，是没有问题的，可以不经过参数处理即可正常传参，但是当我们使用get请求传数组参数的时候，会出现下图这样的情况：

ajax请求方法

// ajax请求方法
export function getDataApi(params) {
  return axios.request({
    url: `${prefix}/transferFee/page`,
    method: "GET",
    params,
  });
}

调用请求

import { getDataApi } from '@/api/index.js';
created() {
  const params = {
    siteCode: '880',
    objectType: '',
    objectName: '',
    offerName: '',
    productCode: '',
    effectiveStatus: '',
    offerStatus: '',
    offerCode: '',
    subjectCodes: ['160', '161', '162'],
    pageNum: 1,
    pageSize: 10,
  }
  getDataApi(params).then((res) => {
    console.log('请求成功', res)
  })
}

之后我们控制台查看请求情况，就会发现当get请求按照这样的方式传递数组参数的时候，查询字符串会错乱，出现这样的情况

http://localhost:5173/basic/cmanager/transferFee/page?siteCode=880&objectType=&objectName=&offerName=&productCode=&effectiveStatus=&offerStatus=&offerCode=&subjectCodes[]=160&subjectCodes[]=161&subjectCodes[]=162&pageNum=1&pageSize=10

数组参数subjectCodes: ['160', '161', '162']被分割成了subjectCodes[]=160&subjectCodes[]=161&subjectCodes[]=16

这样后台是无法正确接受数组参数的，因此我们需要对get请求的数组参数做特殊的处理。

解决办法

主要思路就是数组参数序列化，如果我们使用的是axios插件，那么可以对axios的paramsSerializer属性进行处理，使得数组参数能够序列化

方法:一：自行写回调函数对数组参数进行处理

// ajax请求方法
export function getDataApi(params) {
  return axios.request({
    url: `${prefix}/transferFee/page`,
    method: "GET",
    params,
    // 处理git请求传subjectCodes数组的问题，对数组进行序列化
  paramsSerializer: function(params) {
      let arr = [];
      const {subjectCodes, ...rest} = params;
      for (let key in rest) {
        arr.push(`${key}=${rest[key]}`)
      }
      if (subjectCodes) {
        let subjectCodes=params.subjectCodes.map(_=>`subjectCodes=${_}`).join('&');
        arr.push(subjectCodes)
      }
      const paramsStr = arr.join('&');
      console.log(paramsStr);
      return paramsStr;
  }
  });
}

方法二：使用qs插件对数组参数进行处理
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'

axios配置：

axios.interceptors.request.use(async (config) => {
//只针对get方式进行序列化
 if (config.method === 'get') {
   config.paramsSerializer = function(params) {
     return qs.stringify(params, { arrayFormat: 'repeat' })
   }
 }
}

如果是小程序使用qs

let urlQueryString = qs.stringify(options.params, {   //使用到qs ,先下载，后引入
  addQueryPrefix: true,
  allowDots: true,
  arrayFormat: 'repeat'
});
myUrl += urlQueryString;