前端get请求传递数组型参数时的处理方式

场景

• 后端get接口设计接受数组型查询参数时，只接受重复的query格式，如 arr=[1,2,3]，那么在query里的参数格式需要是 a=1&a=2&a=3
• 前端get请求直接传数组会默认处理为a[]=1&a[]=2&a[]=3，后端无法识别（恼），传json字符串和join拼接后端都不同意
• 如果直接在url中做参数拼接，实在是又蠢又费力

解决

• 使用qs库，对axios请求封装paramsSerializer(params处理函数)，让接口接收到数组类型参数时，用qs统一处理成repeat形式
• 由于AUI是对axios做套层封装，所以对AUI同样管用

举例

import axios from 'axios'
import qs from 'qs'


const params = {
  name: 'xiaoming',
  hobbies: [1, 2, 3]
}


axios.get('https://api.example.com/api', {
  params: { array: arrayParams },
  paramsSerializer: (params) => qs.stringify(params, { arrayFormat: 'comma' })
})
// 最终请求为 https://api.example.com/api?name=xiaoming&hobbies=1,2,3


axios.get('https://api.example.com/api', {
  params: { array: arrayParams },
  paramsSerializer: (params) => qs.stringify(params, { arrayFormat: 'indices' }) // qs的默认arrayFormat
})
// 最终请求为 https://api.example.com/api?name=xiaoming&hobbies[0]=1&hobbies[1]=2&hobbies[2]=3


axios.get('https://api.example.com/api', {
  params: { array: arrayParams },
  paramsSerializer: (params) => qs.stringify(params, { arrayFormat: 'brackets' })
})
// 最终请求为 https://api.example.com/api?name=xiaoming&hobbies[]=1&hobbies[]=2&hobbies[]=3


axios.get('https://api.example.com/api', {
  params: { array: arrayParams },
  paramsSerializer: (params) => qs.stringify(params, { arrayFormat: 'repeat' })
})
// 最终请求为 https://api.example.com/api?name=xiaoming&hobbies=1&hobbies=2&hobbies=3