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
相关推荐
泽02023 分钟前
C++之STL--list
开发语言·c++·list
用户5806139393005 分钟前
前端文件下载实现深度解析:Blob与ObjectURL的完美协作
前端
YGGP7 分钟前
吃透 Golang 基础:数据结构之 Map
开发语言·数据结构·golang
Lin86668 分钟前
Vue 3 + TypeScript 组件类型推断失败问题完整解决方案
前端
coding随想8 分钟前
从零开始:前端开发者的SEO优化入门与实战
前端
~plus~9 分钟前
Harmony核心:动态方法修补与.NET游戏Mod开发
开发语言·jvm·经验分享·后端·程序人生·c#
前端工作日常11 分钟前
我理解的JSBridge
前端
Au_ust11 分钟前
前端模块化
前端
顺丰同城前端技术团队11 分钟前
还不会用 Charles?最后一遍了啊!
前端
BUG收容所所长12 分钟前
二分查找的「左右为难」:如何优雅地找到数组中元素的首尾位置
前端·javascript·算法