开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第3天，点击查看活动详情

前言

在我们开发时，如果请求接口方式是get，传给后端的参数会拼接到url后面，这时候当参数值是数组我们发现接口会报错，提示我们传参格式不对。这个问题我们可以跟后端商量一下，换成post请求方式就能畅通请求成功；还有一种方式我们前端处理就可以啦，接下来我们就来看一下如何在不改变请求方式前提下解决这个问题。

解决

之所以会报错，是因为数组在url传递数组参数时会带上'[]'，就是这个符号导致了报错。解决这个问题最简单的方法就是利用JSON.stringfy变成字符串再进行传递。但是这样子处理，每个get接口数组参数传递前都用这个方法，感觉也不太方便。一般项目中接口请求都会统一封装下，比如axios封装，这时候我们就可以借助qs工具在封装axios请求过程中处理数组参数，这样传参就方便多了。

qs是什么？它是一个能够序列化对象并且解析字符串的库，qs用起来也非常安全。首先我们在项目中利用npm或yarn安装qs：

   npm install qs
   yarn add qs

然后在axios封装代码中对请求方式进行判断，在get请求时用qs处理参数：

   import qs from 'qs'
   if (method === 'get') {
        paramsSerializer = function(params) {
        return qs.stringify(params, { arrayFormat: 'repeat' })
      }
    }

如果axios没有封装，我们也可以直接在axios请求时候使用，处理query参数：

   query = qs.stringify(params,{arrayFormat:'repeat'})

总结

以上就是get传参为数组的解决方法，引入qs第三方库。当然如果我们封装axios时候可以考虑直接添加qs工具，让封装的axios功能更加丰富。