The case where the front-end get request parameter contains an array

Problem Description

When we use post to pass array parameters, there is no problem, and parameters can be passed normally without parameter processing, but when we use get request to pass array parameters, the following situation will appear:

1. ajax request method

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

2. call request

   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)
   	})
   }
   
   

After we check the request status in the console, we will find that when the get request passes the array parameters in this way, the query string will be disordered, and such a situation occurs
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

The array parameters subjectCodes: ['160', '161', '162']are divided into subjectCodes[]=160&subjectCodes[]=161&subjectCodes[]=16

such that the background cannot correctly accept the array parameters, so we need to do special processing for the array parameters of the get request.

Solution

The main idea is to serialize array parameters. If we use the axios plug-in, we can process the paramsSerializer property of axios so that the array parameters can be serialized

1. Method: 1: Write your own callback function to process the array parameters

   // 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;
   	}
     });
   }
   

2. Method 2: Use the qs plug-in to process the array parameters

   qs plugin:

   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 configuration:

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

   If it is a small program, use qs

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

3. For get requests, the query string after array parameter serialization should be as follows
   subjectCodes=160&subjectCodes=161&subjectCodes=162
   

article reference

https://www.cnblogs.com/kingreatwill/p/12641238.html
https://www.jianshu.com/p/656c22a24b69