vue中get请求如何传递数组参数的方法示例

 更新时间:2019-11-08 09:48:57   作者:佚名   我要评论(0)

前言: vue中在与后端进行数据交互时,使用axios发送请求,不做配置直接使用get请求传递数组类型参数的时候,后端是无法接收数据的,需要对axios一些简单的配置才能让

前言: 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插件

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • 如何为vuex实现带参数的 getter和state.commit

相关文章

  • vue中get请求如何传递数组参数的方法示例

    vue中get请求如何传递数组参数的方法示例

    前言: vue中在与后端进行数据交互时,使用axios发送请求,不做配置直接使用get请求传递数组类型参数的时候,后端是无法接收数据的,需要对axios一些简单的配置才能让
    2019-11-08
  • vue-dplayer 视频播放器实例代码

    vue-dplayer 视频播放器实例代码

    官网 vue-dplayer dplayer-doc 示例 如果默认 options 中没有视频链接,之后设置视频链接时,直接通过 this.options.video.url = videoPath 是无效的 需要先获取到播
    2019-11-08
  • vue.js的简单自动求和计算实例

    vue.js的简单自动求和计算实例

    一、导入vue.js 可以用cdn,也可以用内嵌去官网下载插件https://vuejs.org/js/vue.js. <script src="http://files.jb51.net/file_images/article/201911/2019110809
    2019-11-08
  • flask框架自定义过滤器示例【markdown文件读取和展示功能】

    flask框架自定义过滤器示例【markdown文件读取和展示功能】

    本文实例讲述了flask框架自定义过滤器。分享给大家供大家参考,具体如下: 除了一些内置的join length safe等过滤器外, flask还提供了自定义过滤器的功能. 一. 自定
    2019-11-08
  • SpringBoot yml配置文件调用过程解析

    SpringBoot yml配置文件调用过程解析

    这篇文章主要介绍了SpringBoot yml配置文件调用过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1、y
    2019-11-08
  • shell脚本实现ssh-copy-id批量自动发送公钥到远程主机

    shell脚本实现ssh-copy-id批量自动发送公钥到远程主机

    需求 批量实现自动发送公钥到远程主机 环境 firewalld:关闭 selinux:关闭 实现方式 sshpass命令 shell调用expect命令 sshpass命令 #
    2019-11-08
  • Django框架下静态模板的继承操作示例

    Django框架下静态模板的继承操作示例

    本文实例讲述了Django框架下静态模板的继承操作。分享给大家供大家参考,具体如下: 前言:第一篇博客,毕业校招在即,抽空把做过的项目都整理一下。 开发环境:pyt
    2019-11-08
  • vue视频播放暂停代码

    vue视频播放暂停代码

    vue中的视频播放 vue.js中引入video视频播放器 main.js中引入 import Video from 'video.js' import 'video.js/dist/video-js.css' Vue.prototype.$video = Video
    2019-11-08
  • 详解使用Spring快速创建web应用的两种方式

    详解使用Spring快速创建web应用的两种方式

    介绍 本篇文章主要介绍,如何使用 Spring 开发一个 Web 应用。 我们将研究用 Spring Boot 开发一个 web 应用,并研究用非 Spring Boot 的方法。 我们将主要
    2019-11-08
  • 使用go在mangodb中进行CRUD操作

    使用go在mangodb中进行CRUD操作

    我在学习go语言之前,在对数据库进行CRUD的操作基本是用java和sql来对mysql数据库进行操作,但是到了实习中公司业务都是用的是mangodb,通过一段学习时间后,
    2019-10-08

最新评论