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 相关文章推荐
fromCharCode和charCodeAt 方法
Dec 27 Javascript
JavaScript 异步调用框架 (Part 5 - 链式实现)
Aug 04 Javascript
jquery中event对象属性与方法小结
Dec 18 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
Sep 03 Javascript
JS遍历数组及打印数组实例分析
Jan 21 Javascript
jQuery1.9+中删除了live以后的替代方法
Jun 17 Javascript
JS获取和修改元素样式的实例代码
Aug 06 Javascript
JS中this上下文对象使用方式
Oct 09 Javascript
基于JavaScript实现随机颜色输入框
Dec 10 Javascript
javascript实现简单的ajax封装示例
Dec 28 Javascript
Express + Node.js实现登录拦截器的实例代码
Jul 01 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
May 18 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学习笔记 PHP面向对象的程序设计
2011/06/13 PHP
PHP容易忘记的知识点分享
2013/04/30 PHP
PHP代码审核的详细介绍
2013/06/13 PHP
php读取文件内容的三种可行方法示例介绍
2014/02/08 PHP
微信API接口大全
2015/04/15 PHP
CodeIgniter配置之routes.php用法实例分析
2016/01/19 PHP
PHP函数checkdnsrr用法详解(Windows平台用法)
2016/03/21 PHP
详解PHP字符串替换str_replace()函数四种用法
2017/10/13 PHP
Maps Javascript
2007/01/22 Javascript
JavaScript游戏之是男人就下100层代码打包
2010/11/08 Javascript
javascript操作JSON的要领总结
2012/12/09 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
2013/05/08 Javascript
javascript刷新父页面的各种方法汇总
2014/09/03 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
2015/10/24 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
2016/08/24 Javascript
bootstrap模态框消失问题的解决方法
2016/12/02 Javascript
Node+Express+MongoDB实现登录注册功能实例
2017/04/23 Javascript
常见的浏览器Hack技巧整理
2017/06/29 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
2018/09/19 Javascript
vue编写简单的购物车功能
2021/01/08 Vue.js
[05:31]DOTA2上海特级锦标赛主赛事第三日RECAP
2016/03/05 DOTA
[02:14]2016国际邀请赛中国区预选赛Ehome晋级之路
2016/07/01 DOTA
[02:12]打造更好的电竞完美世界:完美盛典回顾篇
2018/12/19 DOTA
Python中表达式x += y和x = x+y 的区别详解
2017/06/20 Python
Python实现 PS 图像调整中的亮度调整
2019/06/28 Python
Python迷宫生成和迷宫破解算法实例
2019/12/24 Python
基于h5py的使用及数据封装代码
2019/12/26 Python
CSS3 不定高宽垂直水平居中的几种方式
2020/03/26 HTML / CSS
Volcom法国官网:美国冲浪滑板品牌
2017/05/25 全球购物
eBay爱尔兰站:eBay.ie
2019/08/09 全球购物
大学生职业生涯规划书模版
2013/12/30 职场文书
商超业务员岗位职责
2015/02/13 职场文书
想要创业,那么你做好准备了吗?
2019/07/01 职场文书
学习nginx基础知识
2021/09/04 Servers
Win11 BitLocker 驱动器加密
2022/04/19 数码科技
MySQL 原理与优化之Update 优化
2022/08/14 MySQL