axios 的 get 请求传递数组参数

最新推荐文章于 2023-08-22 12:09:46 发布

字节颤抖

最新推荐文章于 2023-08-22 12:09:46 发布

阅读量678

点赞数 1

分类专栏：前端开发

本文链接：https://blog.youkuaiyun.com/baobao_123456789/article/details/116024220

版权

前端开发专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何在axios中通过qs库将参数序列化为后台所需的格式，包括comma、indices、brackets和repeat四种格式的示例，以及相应的API调用和qs.stringify的用法说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用 qs 库 ( 请先执行 yarn add qs ) 结合 axios 自带的 paramsSerializer 方法序列化参数:

import axios from 'axios';
import qs from 'qs';

const instance = axios.create({
  baseURL,
  timeout: 30000,
  withCredentials: true,
});

instance({
  method,
  url,
  params, // url 参数
  paramsSerializer: params => qs.stringify(params, { arrayFormat: 'comma' }),
})

qs.stringify 支持转换成以下四种格式, 后台只需要用 Array 接收对应参数就可以了

qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' })  // 'a[0]=b&a[1]=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' }) // 'a[]=b&a[]=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' })   // 'a=b&a=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'comma' })    // 'a=b,c'

参考:

axios中文文档|axios中文网#请求配置#paramsSerializer

qs库使用指南#数组解析和序列化