[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<String, Object> searchMap = new HashMap<>(16);
private Map<String, Object> 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 資料。
資源搜尋網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com
問題解決
[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;
});
};