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-Type为application/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
})
复制代码