[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; }); };