axios的delete方法传递数组参数

httpdelete方法传递数组参数有两种形式

形式一:

通过逗号拼接query参数

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

形式二:

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

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

使用axiosdelete方法传递数组参数

形式一的解决方案

// 这里注意使用+''将参数转换成了字符串,实际上就是把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)
})
posted @ 2022-02-26 22:47  滔天蟹  阅读(6096)  评论(0)    收藏  举报