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
相关推荐
CC.GG1 小时前
【C++】AVL树
java·开发语言·c++
dlhto1 小时前
前端登录验证码组件
前端
@万里挑一2 小时前
vue中使用虚拟列表,封装虚拟列表
前端·javascript·vue.js
黑臂麒麟2 小时前
Electron for OpenHarmony 跨平台实战开发:Electron 文件系统操作实战
前端·javascript·electron·openharmony
wordbaby2 小时前
Tanstack Router 文件命名速查表
前端
CoderCodingNo2 小时前
【GESP】C++四级真题 luogu-B4416 [GESP202509 四级] 最长连续段
开发语言·c++·算法
a程序小傲2 小时前
京东Java面试被问:Fork/Join框架的使用场景
java·开发语言·后端·postgresql·面试·职场和发展
1024肥宅2 小时前
工程化工具类:模块化系统全解析与实践
前端·javascript·面试
软件技术NINI2 小时前
如何学习前端
前端·学习
⑩-2 小时前
Java四种线程创建方式
java·开发语言