axios query传数组参数的格式

news/2024/7/10 1:38:00 标签: javascript, 前端, 开发语言, vue

在 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


http://www.niftyadmin.cn/n/5330771.html

相关文章

pytest -- 进阶使用详解

pytest-html⽣成报告 Pytest-HTML 是⼀个插件,它可以⽣成漂亮且易于阅读的 HTML 测试报告。 pytest-html ⽣成报告的步骤 ① 安装 pytest-html 插件: pip install pytest-html ② 运⾏测试并⽣成报告: file name:main.pyimport pytest&qu…

【CSDN博客系列】自定义模块

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

HTML--JavaScript--流程控制,函数,对象

这好像没什么特别的,记录一下常见的流程结构体: if 条件判断: if (条件) {...; } else if (条件) {...; } else {...; }switch 选择结构: 选择分支,满足那个case就执行那个case,如果都不满足&#xff0c…

第13章 2 进程和线程

文章目录 多个线程共享数据带来的问题及lock锁的使用 p186生产者与消费者问题 p187 多个线程共享数据带来的问题及lock锁的使用 p186 多个线程在同一个进程中运行,多个线程共享这个进程中的全局变量 import threading,timeticket50 # 代表50张车票def sale_ticket…

Ubuntu 22.04 安装MySql

MySQL是非常常用的关系型数据库,无论是大厂还是小厂,都有它的身影。最大的优点是免费,安装起来也比较简单。 MySQL的架构 画了个简图,描述了下MySQL的架构。 其中的比较有趣的点在于连接池和存储引擎。连接池缓存了数据库和客户…

【每日小bug】mybatis plus id注解错误导致的问题

插入数据 id不为自增 指定了主键,没有指定自增。会导致出现 修改如上 报错 Data truncation: Out of range value for column ‘id’ at row 1 数据库是bigint,java中是Integer。 修改如上

IOS-相机权限申请-Swift

配置描述 在Info.plist文件中,新建一个键值对Privacy - Camera Usage Description(或者NSCameraUsageDescription),值为申请描述说明,自定义的 申请 然后在需要申请的文件中导入AVFoundation import AVFoundation…

Python面向对象编程(三)自省机制、super函数、with...as...语句

自省机制 自省是指检查某事物以确定它是什么,它知道什么以及它能够做什么的能力 对于类来说,主要的自省方法有:dir()、__dict__ class A():name userclass B(A):def __init__(self,age):self.age ageI B(12) print(I.__dict__) print(B…