Axios get请求数组参数移除默认的[]

于 2024-10-23 10:16:28 发布
阅读量541 收藏 1
点赞数 4
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/txyzqc/article/details/143176452
版权

列表查询条件中的状态需要支持多选，字段就有原来的number变成了number[]。在Element Plus的加持下，给el-select添加一个multiple就解决了，打完收工。额，还是测试一下吧:)。选择的状态变了，数据没变呀，遂找后端，经过调查，说是不能参数中不能有[]，否则不能正确解析这个参数。

在这里插入图片描述
我隐约记得若干年前，前端用jquery跟后端php对接时就遇到过类似的问题（也可能是我记错了）。现在用的是Axios，我觉得Axios应该会把这个作为选项暴露出来，让使用者可以切换。遂去官网找配置
在这里插入图片描述
大概就是改一下paramsSerializer了，那么怎么改呢？又搜了一下，说是可以改成

paramsSerializer: function(params) {
	return qs.stringify(params, { arrayFormat: 'repeat' });
}

遂安装qs。真能解决问题，就这样吧。

过了几天，也就是今天，我突然想把这个记录下来，于是就想把Axios中的逻辑搞清楚，就去翻代码，无意间看到这段代码（toFormData.js），感觉可以把indexes传成null，就试了试，果然成了
在这里插入图片描述
如下

paramsSerializer: {
	indexes: null,
}

从源码中知道paramsSerializer是支持函数和对象两种参数的。但是文档中却没有，如果我没找错文档的话，那只能说文档跟代码有脱节，滞后了。

如果对你有帮助，请帮忙点赞，嘻嘻:)

「Vue3系列」Vue3 Axios详解
日常笔记/总结/系列知识梳理
03-07 2008
这是响应体的结果，也就是服务器返回的数据。：这是生成此响应的请求，也就是 Axios 在发送请求时所创建的原生的 AJAX 请求对象。：这是响应的 HTTP 状态信息，是一个字符串，描述了状态码的含义，如 ‘OK’、‘Not Found’ 等。通过使用拦截器，你可以更加灵活地控制 Axios 的请求和响应处理流程，提高代码的可维护性和可扩展性。：这是响应的头信息，所有的 header 名称都是小写，可以使用方括号语法访问，例如。：这是 Axios 请求的配置信息，包括请求类型、请求的 URL、请求体等。
使用axios发送post请求上传文件(multipartform-data)到后端
m0_54850825的博客
07-31 3690
实现了一个文件上传服务接口，可以接收前端传递过来的MultipartFile文件，并存储到服务器本地中。获取type为file的标签中的文件，使用axioshttp请求库，发送post请求，将文件发送给后端。
vue3 axios get请求传递数组参数出现中括号 [ ]
qzandyou的博客
07-27 2237
在论坛里找了好多帖子，解决办法很多，大多都是通过技术手段处理的，可惜咱的知识水平有限，压根没有看懂，迷迷糊糊大概了解了些原因，就是。
axios的get请求传入数组参数后端无法接收的问题
bradyM的博客
03-06 1606
axios的get请求传入数组参数后端无法接收的问题
axios get方法传递数组会默认给数组的每个参数添加一个‘[]’，如何去掉这个呢？
我只是个很菜的前端
10-17 3335
axios get方法传递数组会默认给数组的每个参数添加一个‘[]’，如何去掉这个呢？
axios的get请求时数组参数没有下标
范天缘的博客
10-06 1864
这样肯定是不行的 后端接口需要数组[0]: 7 数组[1]:4这样的数据。开发新项目过程中 发现get请求时 数组参数没有下标。原因是因为在请求拦截器没有处理需要的参数。解决方法 在请求拦截器 处理一下参数。
axios中get请求传参为数组/参数序列化
yuhuamei的博客
03-08 2066
axios中get请求传参为数组/参数序列化
axios get请求 传递数组
黄彪博客
11-12 6181
文章参考 get请求如何传递数组参数 问题描述 当我们需要通过get方式传递一个数组作为参数 tag:[1,2,3,4] 预期是解析为:https://www.cnblogs.com/enter?tag=1&tag=2&tag=3&tag=4 然而真相是这样的：https://www.cnblogs.com/enter?tag[]=1&tag[]=2&tag[]=3&tag[]=4,后台是不可能解析到传递的参数 qs插件 qs在axios中自带的有我们无
axios的get请求传入数组参数
bieyezhongcai的博客
08-22 440
但是，如果 params 里有数组参数的话，上面的方法就会带来问题。这时候，后端 Django 用获取到的参数 b 一直是[]
vue3 + ts 封装 axios 方法（包含重复请求，接口超时，重复请求接口间隔）
weixin_43386734的博客
05-24 654
这是参考 https://blog.youkuaiyun.com/qq_35624605/article/details/121074339 这位大佬的写法。这个方法涉及到 重复请求只执行一次 重复请求时间间隔 接口请求超时 等功能。应该可以做到复制即用，该有的注释我都加上了。以上就是 axios 的整体封装了。本人ts暂时不算很熟练，献丑了。并在这个基础上进行优化和改造。简单粗暴，直接上代码。
适合前端的网络请求模块：axios学习全集
鸭绒的博客
08-19 483
1. 什么是axios？ axios是一个基于promise的HTTP库，可以在浏览器和node.js中使用。promise是es6的语法，这对前端人员是非常友好的。 特性： 从浏览器中创建XMLHttpRequests 从node.js创建http请求 支持Promise API 拦截请求和响应 转换请求数据和相应数据 取消请求 自动转换JSON数据 客户端支持防御XSRF 2.axios的API A. axios有一个API可以实现大部分的请求,可以通过向axios传递相关配置来创建请求： axi
OpenHarmony网络请求库-axios
鸿蒙开发知识记录
08-15 624
Axios ，是一个基于 promise 的网络请求库，可以运行 node.js 和浏览器中。本库基于 Axios 原库v1.3.4版本进行适配，使其可以运行在 OpenHarmony，并沿用其现有用法和特性。http 请求request 和 response 拦截器转换 request 和 response 的 data 数据自动转换 JSON data 数据// 创建实例时配置默认值});// 创建实例后修改默认值配置的优先级配置将会按优先级进行合并。
axios get请求传递数组参数
斗战圣佛91的博客
02-05 2075
var ttt = [ {column: "username", type: "EQ", values: "ts"}, ] var test = { pageNum: 1, pageSize: 30, params: JSON.stringify(ttt) } // $.ajax({ // type: "GET", // url: "http://localhost:8099/api/sy.
axios发送get请求但参数中有数组导致请求路径多出了“[]“的处理办法
m0_60817860的博客
01-17 1311
可以看到，我们使用axios发送get请求携带了数组参数时，请求路径中就会多出[]字符，而在后端也会报错1、安装qs当前项目的命令行中安装 2、引入qs库 3、以此代码为例，ids是我们需要向后端传递的参数数组，headers是加载的请求头，我们在这个方法的下方加入下面代码就行了paramsSerializer: (params) => { return qs.stringify(params, { arrayFormat: 'repeat' }) }
vue中axios get,post方式传递数组参数，二维数组参数
静幽水
11-02 2万+
vue中axios post方式传递数组参数，二维数组参数
解决GET请求含有特殊字符（如:*,#,{},[],^,%,(,?,!..等等）
热门推荐
kkk123445的博客
06-01 3万+
问题出现 今天在帮前端小姐姐调试代码时，发现前端的某个参数出现丢失的情况，丢失的参数怎么也传不到后台，后台还报错了。。。 于是乎就开始了调试之路 调试后发现传过来的参数中包含 #（）等字符【其中#字符在url出现的时候，后面的参数是不会传到后台的】 发现问题的原因，这个问题就已经解决了50%了，哈哈 下面就需要解决GET请求含有特殊字符（如:*,#,{},[],^,%,(,?,!..等等）的情况 情景重现 前端代码： //弹出详情页 layer.open({ type:2, ·······
零基础学Axios
m0_75165868的博客
09-24 3489
想用Axios前需要在项目中安装axios,安装方式如下：下列是axios请去方式，本文主要讲解post和get请求，其他请求和这两种请求方法相同。
axios get 处理数组参数
最新发布
03-18
### 使用 Axios 的 GET 请求处理数组作为参数 当通过 Axios 发送 GET 请求并传递数组类型的参数时，可以利用 `params` 配置项来设置 URL 参数。Axios 支持多种方式序列化数组到查询字符串中。 以下是具体实现： #### 方法一：默认序列化行为 Axios 默认会将数组转换为重复键的形式附加到 URL 中。例如： ```javascript const params = { ids: [1, 2, 3] }; axios.get('https://example.com/api', { params }) .then(response => console.log(response.data)) .catch(error => console.error(error)); ``` 上述代码生成的请求 URL 将类似于以下形式[^1]： ``` https://example.com/api?ids=1&ids=2&ids=3 ``` --- #### 方法二：自定义序列化逻辑 如果希望以其他格式（如 JSON 字符串或其他结构）发送数组，则可以通过配置 `paramsSerializer` 来指定自定义序列化函数。例如： ```javascript const qs = require('qs'); const params = { ids: [10, 20, 30] }; axios.get('https://example.com/api', { params, paramsSerializer: params => qs.stringify(params, { arrayFormat: 'brackets' }) // 使用 brackets 格式 }) .then(response => console.log(response.data)) .catch(error => console.error(error)); ``` 此代码生成的请求 URL 可能如下所示[^2]： ``` https://example.com/api?ids[]=10&ids[]=20&ids[]=30 ``` 注意：这里使用了第三方库 `qs` 提供更灵活的序列化选项。如果没有安装该库，可通过命令 `npm install qs` 安装它。 --- #### Spring Boot 后端接收示例 在服务端（假设使用 Spring Boot），可以通过 `@RequestParam` 注解接收数组参数。例如： ```java @RestController @RequestMapping("/api") public class ExampleController { @GetMapping("") public ResponseEntity<?> getExample(@RequestParam List<Integer> ids) { return ResponseEntity.ok(ids); } } ``` 对于客户端传入的 `ids[]` 或多次出现的 `ids` 键，Spring Boot 能够自动将其解析为 Java 列表类型。 --- ### 总结 - 默认情况下，Axios 会将数组中的每一项映射为独立的 URL 查询参数。 - 如果需要特定格式（如带方括号的数组表示法），可借助 `paramsSerializer` 和工具库（如 `qs`）完成定制。 - 在后端，Spring Boot 自动支持从 URL 参数中提取列表数据，并绑定至方法参数。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值