解决前端发axios请求传输数组参数给后端时，请求路径中的数组参数带中括号[]

问题描述

解决办法

网上查阅资料后，发现是因为axios的params参数在序列化时的格式设置不正确而导致的，在axios的配置项中提供paramsSerializer方法可以对params进行序列化：

1. 引入qs序列化库

import qs from 'qs'

2. 封装请求方法

export const getRequest = (url, params) => {
    let accessToken = getStore('accessToken');
    return axios({
        method: 'get',
        url: `${baseApi}${url}`,
        params: params,
        paramsSerializer: params => {
            return qs.stringify(params, { indices: false })
          },
        headers: {
            'accessToken': accessToken
        }
    });
};

3. 调用请求方法

export const getContentByTypeIds = (params) => {
    return getRequest('/bridgeMonitorContent/getContentByTypeIds', params)
}

4. 后台接口

   @GetMapping("/getContentByTypeIds")
    @ApiOperation("通过多监测类型查询监测因素")
    public Result<List<BridgeMonitorContent>> getContentByTypeIds(@RequestParam List<String> monitorTypeIds){
        List<BridgeMonitorContent> contentByTypeId = iBridgeMonitorContentService.getMonitorContentByTypeId(monitorTypeIds);
        return new ResultUtil<List<BridgeMonitorContent>>().setData(contentByTypeId);
    }

最终效果