关于使用axios请求带参数有数组时请求报错

问题描述
封装axios请求，使用get请求时突然报错，对比了url发现，参数中有个参数是数组，请求时转url会保留"[“和”]"。

当参数中包含数组时, 转换的URL会保留"["和"]"
let params = {
    
    
	name: Tom,
	query: [
		{
    
    
			filed: 'age'
		}
	]
}

原因

去查了一下发现，RFC3986标准是保留方括号的

然后去axios github上看了下，之前就有人提出过方括号的问题，而且我目前使用的axios版本很低，所以估计当时版本axios是保留方括号的。

目前最新版本代码已经转换方括号了

解决办法
1.如果接口支持post请求的话，直接用post请求
2.升级axios版本
3.使用 axios 的配置项解决

可以直接用上图的方式，或者封装一下，在请求拦截的时候序列化配置
if(config.method === 'get' || config.method === 'GET') {
    
    
	//序列化
   config.paramsSerializer = params => {
    
    
     return qs.stringify(params, {
    
     indices: false })
   }
}	

备注1：axios不配置paramsSerializer会走默认方法，旧版本的时候保留方括号。配置paramsSerializer的时候就会走自己的处理。
axios 的 BuildURL.js 源码：

function encode(val) {
    
    
  return encodeURIComponent(val).
    replace(/%3A/gi, ':').
    replace(/%24/g, '$').
    replace(/%2C/gi, ',').
    replace(/%20/g, '+').
    replace(/%5B/gi, '[').
    replace(/%5D/gi, ']');
}

/**
 * Build a URL by appending params to the end
 *
 * @param {string} url The base of the url (e.g., http://www.google.com)
 * @param {object} [params] The params to be appended
 * @param {?object} paramsSerializer
 * @returns {string} The formatted url
 */
module.exports = function buildURL(url, params, paramsSerializer) {
    
    
  /*eslint no-param-reassign:0*/
  if (!params) {
    
    
    return url;
  }
  var serializedParams;
  if (paramsSerializer) {
    
    
    serializedParams = paramsSerializer(params);
  } else if (utils.isURLSearchParams(params)) {
    
    
    serializedParams = params.toString();
  } else {
    
    
    var parts = [];
    utils.forEach(params, function serialize(val, key) {
    
    
      if (val === null || typeof val === 'undefined') {
    
    
        return;
      }
      if (utils.isArray(val)) {
    
    
        key = key + '[]';
      } else {
    
    
        val = [val];
      }
      utils.forEach(val, function parseValue(v) {
    
    
        if (utils.isDate(v)) {
    
    
          v = v.toISOString();
        } else if (utils.isObject(v)) {
    
    
          v = JSON.stringify(v);
        }
        parts.push(encode(key) + '=' + encode(v));
      });
    });
    serializedParams = parts.join('&');
  }
  if (serializedParams) {
    
    
    var hashmarkIndex = url.indexOf('#');
    if (hashmarkIndex !== -1) {
    
    
      url = url.slice(0, hashmarkIndex);
    }
    url += (url.indexOf('?') === -1 ? '?' : '&') + serializedParams;
  }
  return url;
};

备注2：关于qs的常用编码方式
qs github 地址

qs.stringify({
    
     a: ['b', 'c', 'd'] });
// 'a[0]=b&a[1]=c&a[2]=d'
qs.stringify({
    
     a: ['b', 'c', 'd'] }, {
    
     indices: false });
// 'a=b&a=c&a=d'
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'