axios传递数组参数，后台接收不到

关于前后端联调，参数接收不到问题，如果遇到一个彩笔后端，参数格式也说不清楚接口文档又没有，是一件很头疼的事情。

axios 传参分两组：get(delete)、post(put)。get和delete 传参方式基本相同，post和put基本相同。

一、get(delete) 传递数组后台接收不到：

这俩都是问号传参，就是参数拼接到url 的问号后面。
就是下面这样：
在这里插入图片描述

但是当传递数组时就麻烦了：

export function getCrApplicationList(data) {
    
    
  var test = [‘111‘, ‘222‘]
  return request({
    
    
    url: ‘/applicant/CrApplication/List‘,
    method: ‘get‘,
    params: {
    
     test }
  })
}

在这里插入图片描述
这样的话后台是取不到值的，我们需要把数组变成如下这种格式：

首先找到axios的请求拦截里面，利用 qs ，加如下代码：

if (config.method === 'get') {
    
    
    // 如果是get请求，且params是数组类型如arr=[1,2]，则转换成url?ids=1&ids=2&ids=3
    config.paramsSerializer = function(params) {
    
    
      // return qs.stringify(params, { arrayFormat: 'repeat' })
      return qs.stringify(params, {
    
     indices: false })
    }
  }

控制台效果如下：
在这里插入图片描述
post基本不会遇到传数组接受不到问题，遇到了直接对参数格式化即可

qs.stringify(params, {
    
     indices: false })

qs库对数组的format有以下几种形式：

qs.stringify({
    
    ids: [1, 2, 3]}, {
    
     indices: false })
// 形式： ids=1&ids=2&id=3
qs.stringify({
    
    ids: [1, 2, 3]}, {
    
    arrayFormat: 'indices'})
// 形式： ids[0]=1&aids1]=2&ids[2]=3
qs.stringify({
    
    ids: [1, 2, 3]}, {
    
    arrayFormat: 'brackets'})
// 形式：ids[]=1&ids[]=2&ids[]=3
qs.stringify({
    
    ids: [1, 2, 3]}, {
    
    arrayFormat: 'repeat'}) 
// 形式： ids=1&ids=2&id=3

二、post（put）传参问题

如果是post请求后台接收不到参数，那么可以从以下几个方面去排查

post传参参数为data

2.后台是不是需要form格式传参
axios默认为jsonapplication/json;charset=utf-8传参，如果后台需要form格式传参，则需要设置:

headers中的Content-Type为application/x-www-form-urlencoded;charset=utf-8或者multipart/form-data

post传参的格式：

application/x-www-form-urlencoded（表单方式）
application/json（JSON方式）
multipart/form-data（文件方式）

补充：

1、在post 请求中能把参数传到url 问号后面吗？

答：可以。直接在 url 后面拼接即可

export function listGroup(query){
    
    
  return request({
    
    
    url:"/census/group/list"+'?pageNum='+query.pageNum+'&pageSize='+query.pageSize,
    method:'post',
    data:query
  })
}

2、get 请求能把参数放在 body 中吗？

答：不能。只能拼接到url中传参
原因参考：
关于在GET请求中使用body
前端Get请求能在body上传参吗

3、关于delete 传参的其他问题

参考：axios delete传递参数方式