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

您所在的位置：网站首页 › get传递数组 › axios传递数组参数，后台接收不到填坑之旅

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

2023-04-14 00:32| 来源: 网络整理| 查看: 265

这是我参与 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;传参

如果后台需要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', 此处是的value) axios({ url: '/users/upload', method: 'post', headers: { 'Content-Type': 'multipart/form-data' }, data: formData }) 复制代码

【本文地址】

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

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

今日新闻

推荐新闻