axios query传数组参数的格式

在 Axios 中,当你需要传递数组参数时,可以使用以下几种方式进行格式化:

  1. 使用 paramsSerializer 将数组转换为逗号分隔的字符串:

    javascript 复制代码
    import axios from 'axios';
    
    import qs from 'qs';
    
    const arrayParams = ['param1', 'param2', 'param3'];
    
    axios.get('https://api.example.com/endpoint', {
    
    params: { array: arrayParams },
    
    paramsSerializer: (params) => qs.stringify(params, { arrayFormat: 'comma' }),
    
    })
    
    .then((response) => console.log(response))
    
    .catch((error) => console.error(error));

    这将发送一个类似于以下的请求: https://api.example.com/endpoint?array=param1,param2,param3

  2. 使用 indices 格式(默认行为):

    javascript 复制代码
    axios.get('https://api.example.com/endpoint', {
    
    params: { array: arrayParams },
    
    })
    
    .then((response) => console.log(response))
    
    .catch((error) => console.error(error));

    这将发送一个类似于以下的请求: https://api.example.com/endpoint?array[0]=param1&array[1]=param2&array[2]=param3

  3. 使用 brackets 格式:

    javascript 复制代码
    axios.get('https://api.example.com/endpoint', {
    
    params: { array: arrayParams },
    
    paramsSerializer: (params) => qs.stringify(params, { arrayFormat: 'brackets' }),
    
    })
    
    .then((response) => console.log(response))
    
    .catch((error) => console.error(error));

    这将发送一个类似于以下的请求: https://api.example.com/endpoint?array[]=param1&array[]=param2&array[]=param3

  4. 使用 repeat 格式:

    javascript 复制代码
    axios.get('https://api.example.com/endpoint', {
    
    params: { array: arrayParams },
    
    paramsSerializer: (params) => qs.stringify(params, { arrayFormat: 'repeat' }),
    
    })
    
    .then((response) => console.log(response))
    
    .catch((error) => console.error(error));

    这将发送一个类似于以下的请求: https://api.example.com/endpoint?array=param1&array=param2&array=param3

    注意,使用 paramsSerializer 需要安装并导入 qs 库。你可以使用以下命令安装它:

    javascript 复制代码
    npm install qs

    javascript 复制代码
    yarn add qs
相关推荐
fouryears_234176 分钟前
Flutter InheritedWidget 详解:从生命周期到数据流动的完整解析
开发语言·flutter·客户端·dart
我好喜欢你~34 分钟前
C#---StopWatch类
开发语言·c#
加班是不可能的,除非双倍日工资2 小时前
css预编译器实现星空背景图
前端·css·vue3
lifallen2 小时前
Java Stream sort算子实现:SortedOps
java·开发语言
IT毕设实战小研2 小时前
基于Spring Boot 4s店车辆管理系统 租车管理系统 停车位管理系统 智慧车辆管理系统
java·开发语言·spring boot·后端·spring·毕业设计·课程设计
wyiyiyi2 小时前
【Web后端】Django、flask及其场景——以构建系统原型为例
前端·数据库·后端·python·django·flask
gnip3 小时前
vite和webpack打包结构控制
前端·javascript
excel3 小时前
在二维 Canvas 中模拟三角形绕 X、Y 轴旋转
前端
cui__OaO3 小时前
Linux软件编程--线程
linux·开发语言·线程·互斥锁·死锁·信号量·嵌入式学习
阿华的代码王国3 小时前
【Android】RecyclerView复用CheckBox的异常状态
android·xml·java·前端·后端