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 EasyUI的formatter格式化函数代码
Jan 12 Javascript
我的javascript 函数链之演变
Apr 07 Javascript
一个关于jqGrid使用的小例子(行按钮)
Nov 04 Javascript
jquery实现文本框数量加减功能的例子分享
May 10 Javascript
node.js中的console.error方法使用说明
Dec 10 Javascript
JavaScript中Function()函数的使用教程
Jun 04 Javascript
浅谈javascript中return语句
Jul 15 Javascript
Javascript typeof与instanceof的区别
Oct 18 Javascript
react实现pure render时bind(this)隐患需注意!
Mar 09 Javascript
Angular4学习笔记之准备和环境搭建项目
Aug 01 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
JavaScript enum枚举类型定义及使用方法
May 15 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
一个没有MYSQL数据库支持的简易留言本的编写
2006/10/09 PHP
基于php和mysql的简单的dao类实现crud操作功能
2014/01/27 PHP
php实现比较两个文件夹异同的方法
2015/06/18 PHP
php 一维数组的循环遍历实现代码
2017/04/10 PHP
PHP基于ORM方式操作MySQL数据库实例
2017/06/21 PHP
php ajax数据传输和响应方法
2018/08/21 PHP
基于jquery的修改当前TAB显示标题的代码
2010/12/11 Javascript
js 判断脚本加载完毕的代码
2011/07/13 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
JavaScript绑定事件监听函数的通用方法
2016/05/14 Javascript
JS留言功能的简单实现案例(推荐)
2016/06/23 Javascript
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
Angular.JS中的this指向详解
2017/05/17 Javascript
vue loadmore组件上拉加载更多功能示例代码
2017/07/19 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
2017/08/31 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
2017/09/21 Javascript
Vue 动态添加路由及生成菜单的方法示例
2019/06/20 Javascript
Vue使用预渲染代替SSR的方法
2020/07/02 Javascript
JS实现可以用键盘方向键控制的动画
2020/12/11 Javascript
解决python2.7 查询mysql时出现中文乱码
2016/10/09 Python
python 处理微信对账单数据的实例代码
2019/07/19 Python
Django bulk_create()、update()与数据库事务的效率对比分析
2020/05/15 Python
浅析python 通⽤爬⾍和聚焦爬⾍
2020/09/28 Python
使用css3和jquery实现可伸缩搜索框
2014/02/12 HTML / CSS
用css3实现当鼠标移进去时当前亮其他变灰效果
2014/04/08 HTML / CSS
介绍一下Java中的Class类
2015/04/10 面试题
军校制空专业毕业生自我鉴定
2013/11/16 职场文书
我未来的职业规划范文
2014/01/11 职场文书
建筑工程专业大学生求职信
2014/04/23 职场文书
校园文化标语
2014/06/18 职场文书
教师一帮一活动总结
2014/07/08 职场文书
乡镇法制宣传日活动总结
2015/05/05 职场文书
干部培训简讯
2015/07/20 职场文书
运动会宣传稿100字
2015/07/23 职场文书
Python预测分词的实现
2021/06/18 Python
阿里云服务器部署mongodb的详细过程
2021/09/04 MongoDB