フロントエンドのgetリクエストパラメータに配列が含まれる場合

問題の説明

post で配列パラメータを渡す場合は問題なく、パラメータ処理を行わずに正常にパラメータを渡すことができますが、get request を使用して配列パラメータを渡すと、次のような状況が発生します。

1. ajaxリクエストメソッド

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

2. 通話リクエスト

   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 プロパティを処理して、配列パラメーターをシリアル化できるようになります。

1. 方法: 1: 配列パラメーターを処理する独自のコールバック関数を作成する

   // 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. 方法 2: 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;
   

3. get リクエストの場合、配列パラメータのシリアル化後のクエリ文字列は次のようになります。
   subjectCodes=160&subjectCodes=161&subjectCodes=162
   

記事参照

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