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 相关文章推荐
jquery限制输入字数,并提示剩余字数实现代码
Dec 24 Javascript
jQuery中的jQuery()方法用法分析
Dec 27 Javascript
js实现缓冲运动效果的方法
Apr 10 Javascript
JQuery包裹DOM节点的方法
Jun 11 Javascript
每天一篇javascript学习小结(Function对象)
Nov 16 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
Feb 03 Javascript
Javascript实现代码折叠功能
Aug 25 Javascript
EasyUI学习之Combobox下拉列表(1)
Dec 29 Javascript
ajax异步请求详解
Jan 06 Javascript
vue组件学习教程
Sep 09 Javascript
详解Vue-cli代理解决跨域问题
Sep 27 Javascript
详解Vue中watch的详细用法
Nov 28 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
服务器变量 $_SERVER 的深入解析
2013/07/02 PHP
Laravel 5框架学习之向视图传送数据(进阶篇)
2015/04/08 PHP
简单谈谈PHP中strlen 函数
2016/02/27 PHP
php+mongodb判断坐标是否在指定多边形区域内的实例
2016/10/28 PHP
thinkPHP实现签到功能的方法
2017/03/15 PHP
PHP实现的AES 128位加密算法示例
2019/09/16 PHP
Laravel 之url参数,获取路由参数的例子
2019/10/21 PHP
浅谈javascript中的作用域
2012/04/07 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
JavaScript实现的经典文件树菜单效果
2015/09/08 Javascript
写给小白的JavaScript引擎指南
2015/12/04 Javascript
jquery ajax分页插件的简单实现
2016/01/27 Javascript
AngularJS之依赖注入模拟实现
2016/08/19 Javascript
JS实现鼠标滑过显示边框的菜单效果
2016/09/21 Javascript
第一次接触神奇的前端框架vue.js
2016/12/01 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
2017/02/14 Javascript
js获取浏览器和屏幕的各种宽度高度
2017/02/22 Javascript
get  post jsonp三种数据交互形式实例详解
2017/08/25 Javascript
JavaScript html5 canvas实现图片上画超链接
2017/10/20 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
2017/12/19 Javascript
JavaScript设计模式之工厂模式简单实例教程
2018/07/03 Javascript
axios的拦截请求与响应方法
2018/08/11 Javascript
layui数据表格 table.render 报错的解决方法
2019/09/29 Javascript
解决vue打包报错Unexpected token: punc的问题
2020/10/24 Javascript
python的常见命令注入威胁
2013/02/18 Python
简单了解python单例模式的几种写法
2019/07/01 Python
Python 等分切分数据及规则命名的实例代码
2019/08/16 Python
Python2与Python3的区别详解
2020/02/09 Python
Pycharm及python安装详细步骤及PyCharm配置整理(推荐)
2020/07/31 Python
python使用正则表达式匹配txt特定字符串(有换行)
2020/12/09 Python
html5中audio支持音频格式的解决方法
2018/08/24 HTML / CSS
2014年关于两会精神的心得体会
2014/03/17 职场文书
高中生家长寄语大全
2014/04/03 职场文书
毕业酒会致辞
2015/07/29 职场文书
2016大学生形势与政策心得体会
2016/01/12 职场文书
Python+Appium新手教程
2021/04/17 Python