http的get方法传递数组参数有两种形式

形式一:

通过逗号拼接query参数

http://localhost:8080/api?arr=1 ,2,3,4&name=1

形式二:

通过数组名+下标指定参数

http://localhost:8080/api?arr[0]=1&arr[1]=2

使用axios的get方法传递数组参数

形式一的解决方案

// 这里注意使用+''将参数转换成了字符串,实际上就是把arr变成了字符串传出去

const params = {

arr: [1,2,3,4] + '',

list: [1,2,3,4]+ ''

}

// 创建axiaos对象,框架中常见的创建方式

const req = axios.create({

baseURL: process.env.VUE_APP_API_BASE_URL, // api base_url

timeout: 6000 // 请求超时时间

})

// 创建请求的promise方法,框架中常见的api封装方式

const queryWayOne = (params) => req({

url: 'xxx',

method: get,

params

})

// 在vue组件中使用

...

created() {

queryWayOne(params).then(res=>{})

}

...

形式二的解决方案

// 这里没有转换成字符串

const param = {

arr: [1,2,3,4],

list: [1,2,3,4]

}

// 安装qs

npm i qs

// 引入qs

import qs from 'qs'

// 在方法中添加paramsSerializer

const queryWayOne = (params) => req({

url: 'xxx',

method: get,

params,

paramsSerializer: params => qs.stringify(params)

})