vue项目 get方式传参数组

最新推荐文章于 2024-07-10 12:22:45 发布

边关月＿

最新推荐文章于 2024-07-10 12:22:45 发布

阅读量1.3k

点赞数

分类专栏：合墨数据文章标签： vue javascript

本文链接：https://blog.csdn.net/weixin_44672169/article/details/119605498

版权

合墨数据专栏收录该内容

13 篇文章 1 订阅

订阅专栏

本文介绍如何在Vue项目中使用qs插件解决GET请求中数组参数格式问题，通过在request.interceptor中添加代码，实现从arr[]=1&arr[]=2到arr=1&arr=2的转换，确保后端能正确解析。

摘要由CSDN通过智能技术生成

背景：多选下拉框的查询，需要给后端传的是个数组（get方式）
在这里插入图片描述
get方法传参数组的时候，会出现arr[]=1&arr[]=2这样的情况，这样的传参，后端是接收不到的，无法解析。

那么我们就需要转换成这样的格式：arr=1&arr=2

解决方法：

1、这里，需要安装一个插件----qs插件，在vue项目中npm add qs即可。
2、在拦截器文件（一般是自己项目中封装的request.js文件）中引入import qs from 'qs'
并加入下面这段重点代码：

// request interceptor
service.interceptors.request.use(
  config => {
    // do something before request is sent
    if (store.getters.token) {
      config.headers['token'] = store.getters.token
    }

    // get方法传递数组的处理（重点代码）
    if (config.method === 'get') {
      config.paramsSerializer = function(params) {
        return qs.stringify(params, { arrayFormat: 'repeat' })
      }
    }

    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

备注：

qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' })
// 'a[0]=b&a[1]=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' })
// 'a[]=b&a[]=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' })
// 'a=b&a=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'comma' })
// 'a=b,c'