解决axios在接口中传递数组，数组里面存放json对象的问题

问题描述

平常在二次封装axios的时候会引用QS这个插件来对参数进行序列化，在Java后端来讲，用表单格式来接收数据比较常见，对于前端就是说Content-Type的值为application/x-www-form-urlencoded，然后我们在post请求的时候会用QS.stringify(params)进行json序列化，这个时候问题来了，在传数组并且数组元素为JOSN对象的时候出错了，你会发现你传过去的数据格式形如这样子的

{
  a: 1,
  b[0][c]: 1
  b[0][d]: 2
}

这种格式后端接口是不能解析的。因为后端需要的格式是这样子的：

{
  a: 1,
  b[0].c: 1
  b[0].d: 2
}

解决办法

  QS.stringify(params,{allowDots: true})

关于QS.stringify，特意查看了下源码

interface IStringifyOptions {
        delimiter?: string;
        strictNullHandling?: boolean;
        skipNulls?: boolean;
        encode?: boolean;
        encoder?: (str: any, defaultEncoder: defaultEncoder, charset: string, type: 'key' | 'value') => string;
        filter?: Array | ((prefix: string, value: any) => any);
        arrayFormat?: 'indices' | 'brackets' | 'repeat' | 'comma';
        indices?: boolean;
        sort?: (a: any, b: any) => number;
        serializeDate?: (d: Date) => string;
        format?: 'RFC1738' | 'RFC3986';
        encodeValuesOnly?: boolean;
        addQueryPrefix?: boolean;
        allowDots?: boolean;
        charset?: 'utf-8' | 'iso-8859-1';
        charsetSentinel?: boolean;
    }

我们可以看到arrayFormat有四种类型，四种类型分别对数组进行不同的序列化，但是对于参数里面存在数组，并且数组中包含对象的时候呢，仅仅设置arrayFormat不能解决问题，必须要设置allowDots为true才能解决问题，而且arrayFormat的格式需要设置为indices，这里因为默认是indices，所以我们就无需设置，但是如果你对数组数据格式有其他要求，可以尝试修改arrayFormat的值。