vue中get请求如何传递数组参数

前言: 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、总结


diboot 简单高效的轻代码开发框架 (欢迎star)

推荐阅读更多精彩内容

  • 我们在实际的Vue项目中经常需要与后端进行数据交互,但是在很大程度上我们需要用到这个插件,但是这里需要注意的一点是...
    Marin_chen阅读 8,451评论 0 5
  • ## 框架和库的区别?> 框架(framework):一套完整的软件设计架构和**解决方案**。> > 库(lib...
    Rui_bdad阅读 2,410评论 1 4
  • feisky云计算、虚拟化与Linux技术笔记posts - 1014, comments - 298, trac...
    不排版阅读 3,127评论 0 5
  • Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。Axios的中文文...
    李亚_45be阅读 8,438评论 1 8
  • 转载自掘金(超好)https://juejin.im/post/5b55c118f265da0f6f1aa354#...
    刘其瑞阅读 1,809评论 0 20
  • 憋写了点东西,想得到一些反馈。好的坏的,总想看看有没有人在乎。这大概就是说人需要交流和沟通才会有继续下去的动力吧。...
    控期待的蛋阅读 199评论 0 0
  • 看着微博关注的人里,最早的那几个名字:好像过了几个世纪遥不可及。算一算,也不过五 可是五六年,一个女子的五六年,太...
    就跳舞吧阅读 74评论 0 0
  • 还记得我们家买牛奶我爸每次都选特仑苏,久而久之,不是厌恶我反而对它有了一种特殊的喜爱。我喜欢那句广告词“不是所有牛...
    做向日葵一样的孩子_阅读 311评论 0 1
  • 个人学习使用 1)上网设置 在CentOS-6中,默认网卡名为:eth0;在CentOS-7中,默认网卡名为:en...
    NOMONEYNOFRIEND阅读 136评论 0 0