java stringfy_[Object Object] 解决方案 JSON.stringify()

[Object Object] 说明

[object Object]是对象的字符串形式，由于隐式调用了 Object 对象的 toString() 方法，形式是："[object Object]"。

[object Object] 表示的就只是一个对象，当前对象 toString() 没有正确解析，可以使用 JSON.stringify() 来避免这个问题。

Json.stringify() 是序列化函数，用于将对象转化为字符串；Json.parse() 是反序列化函数，用于将字符串转化为 Json 对象；

问题分析

此处是前后端分析开发项目，Vue + SpringBoot，前后端一般通过 Json 数据交互。此处"日志列表查询"后端接收到请求数据，进行解析时抛出异常。

后端日志： params : {"start":["0"],"length":["15"],"searchMap":["[object Object]"]} 抛出异常： JSON parse error: syntax error, expect {, actual error, pos 0, fastjson-version 1.2.41; nested exception is com.alibaba.fastjson.JSONException: syntax error, expect {, actual error, pos 0, fastjson-version 1.2.41

后端日志分析接口

@PostMapping(value = "findLogListByPage", produces = "application/json;charset=UTF-8")

public CommonResult findLogListByPage(@RequestBody TableRequest tableRequest) {

return null;

}

解析Vo类TableRequest.java

import lombok.Data;

@Data

public class TableRequest {

private String searchValue;

private String orderKey;

private String orderDir;

private Integer start;

private Integer length = 10;

private Integer draw;

private Map searchMap = new HashMap<>(16);

private Map beanMap = new HashMap<>(16);

}

前端使用封装工具类 fetchUtil 交互。

后端打印日志出现了 [object Object] , 这个对象一般是 JS 报错。

Map map = httpServletRequest.getParameterMap();

String params = new Gson().toJson(map);

后端日志： params : {"start":["0"],"length":["15"],"searchMap":["[object Object]"]}

此处 JSON 解析异常并不是后端的问题，是请求对象格式不正确引起的。浏览器控制台请求查看

可以看到 searchMap 参数数据在前端就已经解析为 [Object Object] 了，正确的请求数据应该是 JSON 数据。

问题解决

[object Object] 一般是前端 JS 数据处理不正确。这里仍然是通过 JSON.stringify() 处理，对 Http POST 请求定义请求头设置 'Content-Type': 'application/json;charset=UTF-8'，POST 请求下数据 JSON.stringify() 转换处理。修复后工具类如下。

修改前

if (httpMethod === 'POST') {

initHeader.method = 'POST';

if (data instanceof FormData) {

initHeader.body = data;

delete initHeader.headers['Content-Type'];

} else {

let paramData = '';

// POST 请求下请求数据处理方式不正确

if (data) {

let paramKeys = Object.keys(data);

if (paramKeys && paramKeys.length > 0) {

paramKeys.map(value => {

paramData += value + '=' + data[value] + '&';

});

}

if (paramData.length > 0 && paramData.endsWith('&')) {

paramData = paramData.substr(0, paramData.length - 1);

}

}

// 此处已经是[Object Object]，后端接收到也是无法正确解析的

initHeader.body = paramData;

}

}

修改后

// url: 接口请求地址，data: 请求参数对象，httpMethod: HTTP 请求方法，header: 请求头

const fetchJson = (url, data, httpMethod, header) => {

let initHeader = {

method: 'GET',

credentials: 'include',

cache: 'no-cache',

mode: 'cors',

headers: {

"Content-Type": "application/x-www-form-urlencoded",

}

};

// 支持自定义请求方法，此处仅维护了 GET POST

httpMethod = httpMethod ? httpMethod : 'GET';

httpMethod = httpMethod.toUpperCase();

if (httpMethod == 'GET') {

let paramData = '';

if (data) {

let paramKeys = Object.keys(data);

if (paramKeys && paramKeys.length > 0) {

paramKeys.map(value => {

paramData += value + '=' + data[value] + '&';

});

}

if (paramData.length > 0 && paramData.endsWith('&')) {

paramData = paramData.substr(0, paramData.length - 1);

}

}

url += '?' + paramData;

} else if (httpMethod == 'POST') {

initHeader.method = 'POST';

if (data instanceof FormData) {

initHeader.body = data;

delete initHeader.headers['Content-Type'];

} else {

initHeader.headers = {

'Accept': 'application/json',

'Content-Type': 'application/json;charset=UTF-8'

}

initHeader.body = JSON.stringify(data);

}

}

// 支持自定义请求头

if (header) {

initHeader = Object.assign({}, initHeader, header);

}

return window.fetch(url, initHeader).then((response) => {

return response;

}).then((response) => {

if (response.ok) {

return response.json();

} else {

throw response;

}

}).then((json) => {

if (json && !isNaN(json.state) && json.state <= 0) {

tipUtil.notification.error(this,json.msgError ? json.msgError : '未知错误，请联系客服');

if (json.state === -2) {

router.push(getRoutePath('login'));

}

}

return json;

}).catch(error => {

tipUtil.notification.error(this,'服务或网络不可用，请联系客服');

throw error;

});

};

Power By niaonao, The End, Thanks