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 相关文章推荐
用函数式编程技术编写优美的 JavaScript
Nov 25 Javascript
js树形控件脚本代码
Jul 24 Javascript
简短几句 通俗解释javascript的闭包
Jan 17 Javascript
防止按钮在短时间内被多次点击的方法
Mar 10 Javascript
js实现顶部可折叠的菜单工具栏效果实例
May 09 Javascript
IE6兼容透明背景图片及解决方案
Aug 19 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
Jun 06 Javascript
纯JS焦点图特效实例(可一个页面多用)
Dec 07 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
Nov 22 Javascript
vue短信验证性能优化如何写入localstorage中
Apr 25 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
Mar 03 Javascript
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
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
星际争霸, 教主第一视角, ZvT经典龙蛇演义
2020/03/02 星际争霸
PHP冒泡排序算法代码详细解读
2011/07/17 PHP
php 模拟 asp.net webFrom 按钮提交事件的思路及代码
2013/12/02 PHP
解析WordPress中控制用户登陆和判断用户登陆的PHP函数
2016/03/01 PHP
Laravel学习教程之IOC容器的介绍与用例
2017/08/15 PHP
PHP时间相关常用函数用法示例
2020/06/03 PHP
基于php+MySql实现学生信息管理系统实例
2020/08/04 PHP
关于hashchangebroker和statehashable的补充文档
2011/08/08 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
2014/05/22 Javascript
ECMAScript6中Map/WeakMap详解
2015/06/12 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
2016/08/18 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
2016/10/10 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
2017/07/17 Javascript
vue生成token并保存到本地存储中
2018/07/17 Javascript
vue+egg+jwt实现登录验证的示例代码
2019/05/18 Javascript
openLayer4实现动态改变标注图标
2020/08/17 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
2021/02/18 Vue.js
[01:11:32]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python用UUID库生成唯一ID的方法示例
2016/12/15 Python
利用Python如何实现数据驱动的接口自动化测试
2018/05/11 Python
python获取命令行输入参数列表的实例代码
2018/06/23 Python
Python实现基于C/S架构的聊天室功能详解
2018/07/07 Python
详解使用django-mama-cas快速搭建CAS服务的实现
2019/10/30 Python
Python模块future用法原理详解
2020/01/20 Python
python3从网络摄像机解析mjpeg http流的示例
2020/11/13 Python
保送生自荐信范文
2013/10/06 职场文书
公益广告语集锦
2014/03/13 职场文书
建筑工地门卫岗位职责
2014/04/30 职场文书
教师节演讲稿
2014/05/06 职场文书
成立公司计划书
2014/05/07 职场文书
在校大学生自我评价范文
2014/09/12 职场文书
镇人大副主席民主生活会对照检查材料思想汇报
2014/10/01 职场文书
学校党委干部个人对照检查材料思想汇报
2014/10/09 职场文书
法定授权委托证明书
2015/06/18 职场文书
Nginx同一个域名配置多个项目的实现方法
2021/03/31 Servers
gojs实现蚂蚁线动画效果
2022/02/18 Javascript