阅读 719

axios传递数组参数,后台接收不到填坑之旅

这是我参与 8 月更文挑战的第 3 天,活动详情查看: 8月更文挑战

公司项目axios发起的请求需要传递一个数组给到后台,后台却说接受不到参数test的值。。。

注意:post请求的参数为data,get请求的参数为params

get请求后台接受不到参数


request({
    test: [1,2,3]
}).then((res) => {
})

//实际项目中推荐对axios统一封装成request后再统一写API调用
export function commonQuery(params) {
    return request({
        url: "/common/query",
        method: "get",
        params //等价于 params:params
    });
}

复制代码

经过一番查询,终于可以成功的传递各种数组类型的参数了,总结一下正确的传数组参数应该如下,需要引入一个序列化的库qs, 在request拦截器里面设置:


import qs from 'qs'

//get,delete设置paramsSerializer属性; post,put传递{ indices: false }

if(config.method === 'get'){
    //如果是get请求,且params是数组类型如arr=[1,2],则转换成arr=1&arr=2
    config.paramsSerializer = function(params) {
        return qs.stringify(params, {arrayFormat: 'repeat'})
    }
}
复制代码

//形式1: ids=1&ids=2&id=3
qs.stringify({ids: [1, 2, 3]}, { indices: false })

//形式2: ids[0]=1&aids1]=2&ids[2]=3
qs.stringify({ids: [1, 2, 3]}, {arrayFormat: 'indices'})

//形式3:ids[]=1&ids[]=2&ids[]=3
qs.stringify({ids: [1, 2, 3]}, {arrayFormat: 'brackets'})

//形式4: ids=1&ids=2&id=3
qs.stringify({ids: [1, 2, 3]}, {arrayFormat: 'repeat'})
复制代码

post请求后台接受不到参数

如果是post请求后台接收不到参数,那么可以从以下几个方面去排查

1. post传参参数为data


// 例如下方参数放在opts里面,opts赋值给data
export function commonQuery(opts = {}) {
    return request({
        url: "/common/query",
        method: "post",
        data: opts
    });
}

//或者如下所示,涉及到es6语法,如果参数和值的命名一样,则可如下省略表示
export function commonQuery(data) {
    return request({
        url: "/common/query",
        method: "post",
        data //等价于 data:data
    });
}
复制代码

2.后台是不是需要form格式传参

axios默认为jsonapplication/json;charset=utf-8传参

如果后台需要form格式传参,则需要设置:

  • headers中的Content-Typeapplication/x-www-form-urlencoded;charset=utf-8或者multipart/form-data
  • transformRequest转换数据格式

post传参的格式

  • application/x-www-form-urlencoded(表单方式)
  • application/json(JSON方式)
  • multipart/form-data(文件方式)

export function commonQuery(data) {
  return axios({
    url: "/common/query",
    method: "post",
    transformRequest: [
      function (data) {
        // Do whatever you want to transform the data
        let ret = ''
        for (const it in data) {
          ret +=
            encodeURIComponent(it) +
            '=' +
            encodeURIComponent(data[it]) +
            '&'
        }
        return ret
      }
    ],
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
    },
    data
  });
}

//formData传递文件
const formData = new FormData()
formData.append('id', '11111')
formData.append('name', '22222')
formData.append('file', 此处是<input type='file'>的value)  

axios({
  url: '/users/upload',
  method: 'post',
  headers: { 'Content-Type': 'multipart/form-data' },
  data: formData
})
复制代码
文章分类
前端
文章标签