使用axios的get方法传包含数组的对象

起因

经过实验，axios的get方法中使用params时对于js数组类型的参数的默认操作比较诡异，会使得参数名后带上'[]'字符串，不得不说是基本反非PHP系后端

而使用JSON.stringify()处理也不是那么好，会将参数变成字符串类型，例如原数组id为[1,2,3],这样处理后后端接受的就变为'id=[1,2,3]'了，可以解析，但对于使用某些框架自带解析的来说这简直是崩坏画风。

究其原因是axios对params的序列化采用的是[qs库]

因此可以使用qs自带的 arrayFormat 参数配置解决这个问题，大致配置如下：

// qs库应该是axios安装时会自带的

const qs = require('qs');

axios.get(url, {
    params:{
        arr: [1,2,3]
    },
    paramsSerializer: function(params) {
        return Qs.stringify(params, {arrayFormat: 'repeat'})
    }
})

这样后端获得参数就比较正常了，为'id=1&id=2&id=3' 但是这种方法仅适用于只有一个数组参数的时候，在使用vue-admin相关生态时往往传递的是一个对象参数，举个例子

const defaultListQuery = {

  pageNum: 1,

  pageSize: 50,

  orderSn: null,

  receiverKeyword: null,

  status: null,

  orderType: null,

  sourceType: null,

  startTime: null,

  endTime: null,

  updateTime: null,

  sellUserName: null,

  buyUserName: null,

  labelList:[]

};

解决方案

1.将请求改变为post请求，这样就不会出现变形清空，但是实际上改变请求方式是很不方便的所以推荐使用2

2.我们将数据调整为list=1&list=2这种格式


import request from '@/utils/request'

export function fetchList(params) {

  return request({

    url: 'xxxxxxx',

    method: 'get',

    params: params,

    paramsSerializer: function (params) {

      const keys = Object.keys(params)

      const arr = []

      keys.forEach(item => {

        if (Array.isArray(params[item])) {

          console.log(params[item]);

          if (params[item].length == 0) {

          } else {

            const url = params[item].map(_ => `${item}=${_}`).join('&')

            arr.push(url)

          }

        } else {

          if (params[item] == null) {

          } else { arr.push(`${item}=${params[item]}`) }

        }

      })

      const result = arr.join('&')

      console.log(result)

      return `${result}`

    }

  })

}

原因

axios的get请求中会将对象转为url中的解码方式将array解码为arr[]=value，这种格式java获取参数是有问题的，所以我们直接通过axios预先设计的序列化参数paramsSerializer，来自己生成url

axios.get传递包含数组的对象

起因

解决方案

原因