[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 數據。

問題解決

    [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