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
相关推荐
xyq2024几秒前
Bootstrap 表格
开发语言
大黄说说12 分钟前
TensorRTSharp 实战指南:用 C# 驱动 GPU,实现毫秒级 AI 推理
开发语言·人工智能·c#
范纹杉想快点毕业17 分钟前
嵌入式系统架构之道:告别“意大利面条”,拥抱状态机与事件驱动
java·开发语言·c++·嵌入式硬件·算法·架构·mfc
liu_bees18 分钟前
微信小程序Canvas生成图片失败:canvas is empty问题解析
微信小程序·小程序·uni-app·vue
陳103018 分钟前
C++:map和set的使用
开发语言·c++
2501_9403152621 分钟前
【无标题】2390:从字符串中移除*
java·开发语言·算法
共享家952726 分钟前
基于 Coze 工作流搭建历史主题图片生成器
前端·人工智能·js
lly20240627 分钟前
jEasyUI 树形菜单添加节点
开发语言
zhaoyin199427 分钟前
fiddler抓包工具使用
前端·测试工具·fiddler
微祎_28 分钟前
Flutter for OpenHarmony:构建一个 Flutter 单词拼图游戏,深入解析状态驱动 UI、交互式字母操作与教育类应用设计
javascript·flutter·ui