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 load()在firefox(火狐)下显示不正常的解决方法
Apr 05 Javascript
JS在IE下缺少标识符的错误
Jul 23 Javascript
jQuery验证插件validation使用指南
Apr 21 Javascript
优化RequireJS项目的相关技巧总结
Jul 01 Javascript
直接拿来用的15个jQuery代码片段
Sep 23 Javascript
JavaScript的React框架中的JSX语法学习入门教程
Mar 05 Javascript
jQuery实现HTML表格单元格的合并功能
Apr 06 Javascript
jquery跟随屏幕滚动效果的实现代码
Apr 13 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
Oct 26 Javascript
AngularJS中scope的绑定策略实例分析
Oct 30 Javascript
vue实现简单图片上传
Jun 30 Javascript
TypeScript实用技巧 Nominal Typing名义类型详解
Sep 23 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开发GUI
2006/10/09 PHP
深入了解php4(1)--回到未来
2006/10/09 PHP
令PHP初学者头疼十四条问题大总结
2008/11/12 PHP
WordPress中用于更新伪静态规则的PHP代码实例讲解
2015/12/18 PHP
PHP常用函数之base64图片上传功能详解
2019/10/21 PHP
jquery 弹出层注册页面等(asp.net后台)
2010/06/17 Javascript
基于编写jQuery的无缝滚动插件
2014/08/02 Javascript
动态加载js文件简单示例
2016/04/21 Javascript
js判断价格,必须为数字且不能为负数的实现方法
2016/10/07 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
JS实现简单的点赞与踩功能示例
2018/12/05 Javascript
vue实现购物车选择功能
2020/01/10 Javascript
Vue数字输入框组件使用方法详解
2020/02/10 Javascript
vue项目,代码提交至码云,iconfont的用法说明
2020/07/30 Javascript
vue中实现点击变成全屏的多种方法
2020/09/27 Javascript
简明 Python 基础学习教程
2007/02/08 Python
使用python绘制常用的图表
2016/08/27 Python
Python中的字符串操作和编码Unicode详解
2017/01/18 Python
python3 json数据格式的转换(dumps/loads的使用、dict to str/str to dict、json字符串/字典的相互转换)
2019/04/01 Python
python 批量解压压缩文件的实例代码
2019/06/27 Python
简单了解python反射机制的一些知识
2019/07/13 Python
详解Python中正则匹配TAB及空格的小技巧
2019/07/26 Python
Python使用pymysql模块操作mysql增删改查实例分析
2019/12/19 Python
Python中SQLite如何使用
2020/05/27 Python
使用keras框架cnn+ctc_loss识别不定长字符图片操作
2020/06/29 Python
详解python polyscope库的安装和例程
2020/11/13 Python
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
2021/01/27 HTML / CSS
利用html5 canvas破解简单验证码及getImageData接口应用
2013/01/25 HTML / CSS
世界上最大的网络主机公司:1&1
2016/10/12 全球购物
Lancome兰蔻官方旗舰店:来自法国的世界知名美妆品牌
2018/06/14 全球购物
应届生程序员求职信
2013/11/05 职场文书
应届毕业生求职信
2013/11/30 职场文书
工作自我评价怎么写
2014/01/29 职场文书
工会优秀工作者事迹
2014/08/17 职场文书
教你怎么用Python实现多路径迷宫
2021/04/29 Python
Python实现列表拼接和去重的三种方式
2021/07/02 Python