使用Axios发送POST请求携带Map对象时后端收到空Map的问题

问题原因 #

• JSON.stringify() 处理原生 Map 类型时不会枚举内部存储的键值对，默认序列化结果为空对象 {}。而Axios默认会将传入的请求参数对象执行 JSON.stringify 序列化后作为请求体发送，因此后端接收时拿到的就是空结构。

解决方案 #

根据后端接口的接收规则选择对应方案即可：

• 方案1：将Map转换为普通对象发送，适配后端接收普通JSON键值对的场景

let dataMap = new Map();
dataMap.set('testKey', 'testValue')
// 把Map实例转换为普通JS对象
const article = { map: Object.fromEntries(dataMap) }

axios.post('http://localhost:3001/testEndpoint', article).then(data => {
    console.log(data['data']);
})

• 方案2：将Map转换为键值对数组发送，适配后端需要还原为Map结构的场景

let dataMap = new Map();
dataMap.set('testKey', 'testValue')
// 转换为 [[key1, value1], [key2, value2]] 格式的二维数组
const article = { map: Array.from(dataMap.entries()) }

axios.post('http://localhost:3001/testEndpoint', article).then(data => {
    console.log(data['data']);
})
// 后端拿到数组后可通过 new Map(receivedArray) 直接还原为Map实例

• 方案3：发送application/x-www-form-urlencoded格式请求时，直接传入URLSearchParams实例

let dataMap = new Map();
dataMap.set('testKey', 'testValue')
const params = new URLSearchParams(dataMap);

axios.post('http://localhost:3001/testEndpoint', params).then(data => {
    console.log(data['data']);
})

内容的提问来源于stack exchange，提问作者Nelson Matias