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

时间: 2019-11-19阅读: 344标签: json

[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;
    });
};
站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/6931

JSON和HTML之间互转实现

主要实现功能html转json,再由json恢复html,可去除 style 和 script 标签,将行内样式转换为 js object,将 class 转换为数组形式,主要依赖于 htmlparser2 ; 这是一个性能优越、功能强大的 html 解析库

什么是json?

json的全称为:JavaScript Object Notation,是一种轻量级的数据交互格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据

javascript怎么判断是否为json?

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据

深入理解 JSON

我们先来看一个JS中常见的JS对象序列化成JSON字符串的问题,请问,以下JS对象通过JSON.stringify后的字符串是怎样的?先不要急着复制粘贴到控制台,先自己打开一个代码编辑器或者纸,写写看

JSON.parse和JSON.stringify的巧用

JSON.parse和JSON.stringify是对json数据的转换,在js中使用的频率还是非常高的,比如localStorage,cookie中对复合型数据的存储,与服务器进行数据交互的格式转换等等。

JSON.parse 比 Object 字面量语法更快

因为 JSON 语法比 Javascript 的语法更简单,因此解析 JSON 比解析 Javascript 更高效。当一个 web app 需要加载在首次加载时,解析一个非常复杂的、大型的、符合 JSON 规范的对象字面量配置对象时

javascript怎么解析json?

JavaScript解析json数据,可以使用JSON.parse()方法来实现解析。JSON.parse()方法可以解析JSON字符串,转换为 JavaScript 对象。

js实现json数据格式化及压缩

经常写代码就免不了与json这种轻量级的数据打交道,一般我们得到的json字符串是混乱的,计算机不在乎,再乱它都能认识,作为人类,虽然也能认识,但识读起来比较困难。

json与jsonp的使用

在ajax中 JSON用来解决数据交换问题,而JSONP来实现跨域。备注:跨域也可以通过服务器端代理来解决;理解:JSON是一种数据交换格式,而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。

JavaScript JSON

JSON 是存储和传输数据的格式。JSON 经常在数据从服务器发送到网页时使用。JSON 指的是 JavaScript Object Notation,JSON 是轻量级的数据交换格式

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广