【AntdPro+Vue】axios的get请求参数里有数组[]导致后端接收数据异常

异常情景

传递参数nameList=[‘Tom’, ‘Jerry’]到接口，发送请求http://emily-project.xxx/api/mock/list?nameList=[%27Tom%27,%20%27Jerry%27]。此时，后端反馈报400，没映射进去后端接口！
经过一番问题排查，最后发送请求http://emily-project.xxx/api/mock/list?nameList=%5B%27Tom%27,%20%27Jerry%27%5D（会对[]进行编码！），后端映射成功，返回了数据！

原因

首先，要清楚以下3点：

1. antd pro框架使用axios（基于promise的HTTP库）来发送请求。
2. axios会对get请求的整个url进行encodeURI。
3. encodeURI不会对[]进行编码，这是造成get方法不能传[]的原因！

解决方法

在项目的src\utils\request.js文件中，自己新建一个axios实例。在该实例的请求拦截器中，对每个参数进行encodeURIComponent()，该方法会对[]进行编码！

// src\utils\request.js文件
// 创建 axios 实例2
const request2 = axios.create({
     
  baseURL: process.env.VUE_APP_API_BASE_URL // 根据实际修改，该项目默认的axios实例baseURL是啥，你新建的照搬就行！
})

// 实例2的请求拦截器
request2.interceptors.request.use(config => {
     
  let url = config.url
  if (config.params) {
     
    url += '?'
    const keys = Object.keys(config.params)
    for (const key of keys) {
     
      url += `${
       key}=${
       encodeURIComponent(config.params[key])}&`
    }
    url = url.substring(0, url.length - 1)
    config.params = {
     }
  }
  config.url = url
  return config
}, errorHandler)

// 响应拦截器
request2.interceptors.response.use((response) => {
     
  return response.data
}, errorHandler)

export {
     
  request2 as axios2
}

// 普通的get请求用默认的axios实例就好。当get请求的参数值含有[]这种字符时，则使用自定义的axios实例
import {
      axios, axios2 } from '@/utils/request'

export function fetchList (parameter) {
     
  return axios2({
     
    url: api.fetchList,
    method: 'get',
    params: parameter
  })
}

最后，大功告成！欢迎有其他解决方法的小伙伴给我留言，共同进步~