axios的post请求和get请求传递数组

最新推荐文章于 2022-10-25 10:25:11 发布
原创 最新推荐文章于 2022-10-25 10:25:11 发布 · 4.2k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了在使用axios进行post和get请求时，如何解决数组数据格式化问题，确保后台能够正确接收。通过使用qs库的stringify函数，并设置arrayFormat为'comma'，将数组转换为逗号分隔的字符串，从而实现数据的有效传输。

一、背景

 axios 的post和get请求在中传递数组的过程中，后台无法接受到传输的参数，主要原因数据格式化过程中规范不一致导致无法接受

二、解决方法

将请求参数中含有的数组数据，格式化过程中，将数组以“,”（逗号）的方式格式化成字符串，主要使用的方式是Qs 进行格式化，调用Qs的stringify函数进行数据格式化。

（1）安装qs

npm install qs

(2) 导入依赖

import qs from 'qs';

（3） 处理请求数据

qs.stringify(data, { arrayFormat: 'comma' })

 （4） 扩展

qs提供多种处理数组的方法，可以根据自己的实际需求对数组进行格式化，npm 网站qs介绍地址如下：https://www.npmjs.com/package/qs；如图所示，传递不同的参数进行不同的数据格式化

 

 

 

axios 之传递数组参数 探究（示例篇）
Markix的博客
11-27 3471
get 方式，对params做处理 通过 paramsSerializer 指定序列化配置 axios.get(`http://localhost:8080/array`, { params: { "ids": ["1", "2"] }, paramsSerializer: function (params) { return Qs.stringify(params, { arrayFormat: 'repeat' }) } } );
axios几种请求类型的格式
最新发布
casually的博客
02-25 977
Axios 是一个基于 Promise 的 HTTP 客户端，广泛用于浏览器和 Node.js 中发送 HTTP 请求。它支持多种请求格式，包括 GET、POST、PUT、DELETE 等。也叫RESTful
axios post 传递数组_axios传递数组参数总结
weixin_34321959的博客
12-23 2139
想要传这样的内容：axios.post(url,{ids: [1,2,3],type: 1}).then((res) => {})引用import axios from 'axios'import qs from 'qs'get / delete请求方式解决方式如下axios.get(url, {params: {ids: [1,2,3],type: 1},paramsSerializer:...
axios向后台传递数组作为参数的方法
12-12
axios 的post方法向后台传递参数时的代码： var params = new URLSearchParams(); params.append('faultNum',this..fault_num); params.append('far',this.far); this.$Axios.post("/test",params) .then(res => { }).catch(err => { console.log(err); }); 其中far是个数组，但此时后台接收到的far为[object,object].解决这个问题，应该将 params.append('far
html 跨域_跨域方案总结
weixin_39866881的博客
11-29 5213
平时在开发中总是会遇到各种跨域问题，一直没有很好地了解其中的原理，以及其各种实现方案。今天在这好好总结一下。本文完整的源代码请猛戳xiangxingchen/blog​github.com博客，建议大家动手敲敲代码。1、什么是跨域？为什么会有跨域？一般来说，当一个请求url的协议、域名、端口三者之间任意一个与当前页面地址不同即为跨域。 之所以会跨域，是因为受到了同源策略的限制，同源策略要求源相同...
axios post object object_深入学习Axios源码（构建配置）
weixin_39715997的博客
12-01 384
axios是我们日常代码中常用的一个http库，它可以用来在浏览器或者node.js中发起http请求；它强大的功能和简单易用的API受到了广大前端童鞋们的青睐；那么它内部是如何来实现的呢，让我们走进它的源码世界一探究竟。首先来看一下axios有哪些特性：从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应转换请求数据和响...
解决Vue axios post请求,后台获取不到数据的问题方法
10-18
总的来说，解决Vue axios POST请求后台获取不到数据的问题通常需要理解数据如何在前后端之间传输，并根据具体的数据结构选择合适的序列化和解析方法。同时，保持良好的沟通与合作，确保前端和后端的接口约定一致，也...
vue基础知识--axios合并请求和slot
10-15
每个请求可以是`axios.post`、`axios.get`等，它返回一个Promise对象。 2. 使用`.then()`方法来处理当所有请求都完成后的回调函数，在回调函数中使用`this.$axios.spread`方法将所有的响应数据作为参数传递给回调...
Axios使用post方法给后端传数组的问题
weixin_43822858的博客
01-11 4715
在做前后端对接的时候遇到的一个传数组的问题，首先，axios的post方法传值，我选择了使用实例化一个FormData对象来传值,然后后端使用post正常取值嘛。但是我这个数据比较复杂，最后有一个值是数组。 我在采用和别的字符串或整型数据一样传值方法时候发现，传过去的数组对象竟然变成了[{object object},{object,object}],后来问了公司前辈，才知道前端FormData传...
axios，post请求传递数组
guodanpidashu的博客
01-05 2524
export const createUpdatePreRule = (data) => { return request ({ url: '/system/node-preprocess/createUpdateDelete', method: 'post', data:data, headers:{'Content-Type':'application/json'} // 重点 }) } ..
VUE学习10--VUE如何请求数据（一）--Vue-Resource的使用（包含前后端使用demo）
stalin_的博客
09-08 941
VUE请求数据的常用方式有三种： vue-resource axios fetch-jsonp 今天我们先来说一下vue-resource 一、优势及特点： 1. 体积小 vue-resource非常小巧，在压缩以后只有大约12KB，服务端启用gzip压缩后只有4.5KB大小，这远比jQuery的体积要小得多。 2. 支持主流的浏览器 和Vue.js一样，vue-resource除了不支持IE 9以下的浏览器，其他主流的浏览器都支持。 3. 支持Promise API和URI Templat
axios get传参_axios 传数组或对象格式的参数用GET和POST的区别
weixin_39754267的博客
11-27 1032
踩过坑必须记录一下，下次才能再踩一次！1、前端传对象数组格式参数给后台接口，后台定义请求方式为GET，但是每次传参都返回参数格式不正确，参数打印出来格式就是后端需要的数组对象，但是看控制台的请求参数，变成了这种格式的数据（下图一），当时就蒙了。图一2、相同的数据请求另一个接口（要求请求方式为POST方式），请求参数就能正常传递（下图二）图二其实，这一切都是因为封装了request方法中，对请求参数...
Vue.cli3使用axios的post给后台传数组参数(qs篇)
wupinlong的博客
08-05 5110
1.问题 很多人在向后端请求要携带数组参数时，很多人是这样的 这样传过去的话，100%会出问题 2.解决 我们可以这样处理，利用qs去转换一下，如果你安装了axios，就不要去安装qs了，axios里面包含了qs，你只要引入就OK了（import Qs from ‘qs’） 比如我们要传过去这种的数组参数 let ldidList = [] for (var i = 0; i < this.tableNum.length; i++) { ldidList.push(this.tabl.
axios post 传递数组_基于小程序请求接口 wx.request 封装的类 axios 请求
weixin_42598278的博客
01-05 426
Introductionwx.request 的配置、axios 的调用方式源码戳我feature支持 wx.request 所有配置项支持 axios 调用方式支持 自定义 baseUrl支持 自定义响应状态码对应 resolve 或 reject 状态支持 对响应（resolve/reject）分别做统一的额外处理支持 转换请求数据和响应数据支持 请求缓存（内存或本地缓存），可设置缓存标记、过...
axios.get-数组传参
JasonJust博客站
10-25 483
axios.get数组传参
vue使用axios的post提交方式，参数为数组
qq_42964384的博客
11-14 1万+
做项目时，axios提交post请求 ，控制台报错，看图 意思大概就是我们url不能解析,没有序列化吧也就是，当然不能发送成功。这是我写的url Axios.post('/api/order/create?token=' + token + '&amp;goodsJsonStr=' + shopping ).then(res =&gt; { console.log...
axios get请求 传递数组
黄彪博客
11-12 6389
文章参考 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方法传递数组
热门推荐
yujin0213的博客
03-07 2万+
axios的get方法中使用params时对于js数组类型的参数的默认操作比较奇怪，会使得参数名后带上’[]'字符串，如下 但是console.log参数bizType，就是正常的[‘3’,‘4’,‘5’] 按照网上的写法，把数组json序列化 再查看参数，发现变成了这样 本来以为能解决问题，其实传递给后端的是’[“4”,“5”,“6”]’，后端说解析不了
axios使用get请求传递数组对此昂
05-13
当使用 GET 请求传递数组时，可以将数组转换为字符串并将其作为查询参数传递。可以使用 `JSON.stringify()` 方法将数组转换为字符串，然后将其作为查询参数传递。例如： ```javascript const array = [1, 2, 3]; axios.get('/api/data', { params: { values: JSON.stringify(array) } }) ``` 在后端，可以使用相应的方式将字符串转换为数组。例如，在 Node.js 中可以使用 `JSON.parse()` 方法将字符串转换为数组： ```javascript const values = JSON.parse(req.query.values); console.log(values); // [1, 2, 3] ``` 需要注意的是，在使用 GET 请求时，查询参数的长度是有限制的，如果数组过大可能会超出长度限制。此时可以考虑使用 POST 请求，将数组作为请求体传递。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值