qs 解决 axios 使用 get 方法传递数组参数

小秀_heo

于 2024-08-01 09:27:41 发布

阅读量98

点赞数 2

分类专栏： JavaScript 文章标签： java 开发语言 javascript

本文链接：https://blog.csdn.net/XiugongHao/article/details/140838383

版权

JavaScript 专栏收录该内容

108 篇文章 1 订阅

订阅专栏

解决 axios 传递数组参数

参考：axios 使用 get 方法传递数组参数

数组：

tags = ['男', '女']

此时传递的格式为：

http://localhost:8080/api/user/search/tags?tagNameList[]=%E7%94%B7&tagNameList[]=%E5%A5%B3

但是后端不理解这种格式，所以我们需要序列化：

在这里插入图片描述

const userListData = await myAxios.get('/user/search/tags', {
    params: {
      tagNameList: tags
    },
    //序列化
    paramsSerializer: {
      serialize: params => qs.stringify(params, {indices: false}),
    }
  })

这时传递的格式为：

http://localhost:8080/api/user/search/tags?tagNameList=%E7%94%B7&tagNameList=%E5%A5%B3

后端可以正常解析。

@GetMapping("/search/tags")
public BaseResponse<List<User>> searchUsersByTags(@RequestParam(required = false) List<String> tagNameList) {
    if (CollectionUtils.isEmpty(tagNameList)) {
        throw new BusinessException(ErrorCode.PARAMS_ERROR);
    }
    List<User> userList = userService.searchUsersByTags(tagNameList);
    return ResultUtils.success(userList);
}

qs

qs.parse() 将url解析成对象的形式
qs.stringify() 将对象序列化成url的形式，以&进行拼接

qs.stringify({ids: [1, 2, 3]}, { indices: false })
//  ids=1&ids=2&ids=3

qs.stringify({ids: [1, 2, 3]}, { indices: true })
//  ids[0]=1&ids[1]=2&id[2]=3

qs.stringify({ids: [1, 2, 3]}, {arrayFormat: ‘repeat‘}) 
// ids=1&ids=2&ids=3

qs.stringify({ids: [1, 2, 3]}, {arrayFormat: ‘brackets‘})
 // ids[]=1&ids[]=2&ids[]=3

qs.stringify({ids: [1, 2, 3]}, {arrayFormat: ‘indices‘})
// ids[0]=1&ids[1]=2&ids[2]=3

qs.stringify({ids: [1, 2, 3]}, {arrayFormat: ‘comma‘}) 
// ids[0]=1&ids[1]=2&ids[2]=3