vue中get请求如何传递数组参数的方法示例


Posted in Javascript onNovember 08, 2019

前言: vue中在与后端进行数据交互时,使用axios发送请求,不做配置直接使用get请求传递数组类型参数的时候,后端是无法接收数据的,需要对axios一些简单的配置才能让后端完美的接收数组

1、问题

示例代码

let params = {
        statusList: ['OVERDUE', 'DELAY']
       }
       
this.$http.get('/list', params)
      .then(res => {})
      .catch(e => {})

上述代码在不做配置的时候请求信息为:/list?statusList[]=OVERDUE&statusList[]=DELAY对于后端来说,statusList[]形式的提交是无效的,实际需要的是/list?statusList=OVERDUE&statusList=DELAY这种方式的提交。那么我们应该如何来解决这种问题呢?

2、解决方案

2.1 qs插件

qs主要是增加一些安全性的查询字符串解析和序列化字符串的库,qs的更多使用方式可以参考总结中提供的地址学习

1、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' })
// 输出结果:'a[0]=b&a[1]=c'
2、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' })
// 输出结果:'a[]=b&a[]=c'
3、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' })
// 输出结果:'a=b&a=c'
4、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'comma' })
// 输出结果:'a=b,c'

上述我们列举了qs中的序列化几种配置,其中{ arrayFormat: 'repeat' }的序列化结果满足我们的条件

2.2 axios配置

axios中有一个专门对数据进行序列化的配置属性paramsSerializer

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

2.3 具体配置

我们可以在axios请求拦截器中对参数进行序列化配置

axios.interceptors.request.use(async (config) => {
//只针对get方式进行序列化
 if (config.method === 'get') {
  config.paramsSerializer = function(params) {
   return qs.stringify(params, { arrayFormat: 'repeat' })
  }
 }
}

3、总结

axios中文文档

qs插件

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让回调函数 showResponse 也带上参数的代码
Aug 13 Javascript
Jquery 的扩展方法总结
Oct 01 Javascript
jquery 操作DOM案例代码分享
Apr 05 Javascript
javascript学习笔记(五) Array 数组类型介绍
Jun 19 Javascript
javascript 实现简单的table排序及table操作练习
Dec 28 Javascript
onmouseover和onmouseout的一些问题思考
Aug 14 Javascript
详解JavaScript 中的 replace 方法
Jan 01 Javascript
关于vue路由缓存清除在main.js中的设置
Nov 06 Javascript
前端开发之便利店收银系统代码
Dec 27 Javascript
原生JS实现汇率转换功能代码实例
May 13 Javascript
Element-ui upload上传文件限制的解决方法
Jan 22 Javascript
浅谈JS的二进制家族
May 09 Javascript
Vue搭建后台系统需要注意的问题
Nov 08 #Javascript
vue视频播放暂停代码
Nov 08 #Javascript
vue-dplayer 视频播放器实例代码
Nov 08 #Javascript
BootstrapValidator实现表单验证功能
Nov 08 #Javascript
vue项目中定义全局变量、函数的几种方法
Nov 08 #Javascript
Vue修改项目启动端口号方法
Nov 07 #Javascript
vue 父组件通过$refs获取子组件的值和方法详解
Nov 07 #Javascript
You might like
php mysql Errcode: 28 终极解决方法
2009/07/01 PHP
PHP实现邮件群发的源码
2013/06/18 PHP
Drupal7连接多个数据库及常见问题解决
2014/03/02 PHP
如何在旧的PHP系统中使用PHP 5.3之后的库
2015/12/02 PHP
PHP目录与文件操作技巧总结(创建,删除,遍历,读写,修改等)
2016/09/11 PHP
如何在PHP中生成随机数
2020/06/04 PHP
php提高脚本性能的4个技巧
2020/08/18 PHP
ThinkPhP+Apache+PHPstorm整合框架流程图解
2020/11/23 PHP
基于jquery的表头固定的若干方法
2011/01/27 Javascript
jQuery版仿Path菜单效果
2011/12/15 Javascript
window.open打开页面居中显示的示例代码
2013/12/27 Javascript
输入框过滤非数字的js代码
2014/09/18 Javascript
JavaScript解析json格式数据简单示例
2014/12/09 Javascript
ECMAScript6中Map/WeakMap详解
2015/06/12 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
2015/08/08 Javascript
JS修改地址栏参数实例代码
2016/06/14 Javascript
使用JS实现图片展示瀑布流效果的实例代码
2016/09/12 Javascript
NodeJs之word文件生成与解析的实现代码
2019/04/01 NodeJs
javascript实现时间日期的格式化的方法汇总
2020/08/06 Javascript
解决vuex刷新数据消失问题
2020/11/12 Javascript
简述Python2与Python3的不同点
2018/01/21 Python
python爬虫正则表达式之处理换行符
2018/06/08 Python
Django框架验证码用法实例分析
2019/05/10 Python
python实现暗通道去雾算法的示例
2020/09/27 Python
如何使用python写截屏小工具
2020/09/29 Python
带有css3动画效果的兼容多浏览器简单导航条示例
2014/01/26 HTML / CSS
CSS3中的Transition过度与Animation动画属性使用要点
2016/05/20 HTML / CSS
Html5之webcoekt播放JPEG图片流
2020/09/22 HTML / CSS
澳大利亚领先的女帽及配饰公司:Morgan&Taylor
2019/12/01 全球购物
Herschel美国官网:背包、手提袋及配件
2020/03/10 全球购物
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
2014年学校德育工作总结
2014/12/05 职场文书
同学会邀请函模板
2015/01/30 职场文书
委托收款证明
2015/06/23 职场文书
《平移和旋转》教学反思
2016/02/19 职场文书
C3 线性化算法与 MRO之Python中的多继承
2021/10/05 Python