为什么{c,b,a}打印出来变成{a,b,c}？

前端小蜗
573 阅读3分钟

背景：

在开发时发现接口返回的数据和我获取到的数据不一致，开始以为是哪里做了处理。

后来发现打印出来的数据 点击拷贝和打印的数据顺序不一样， 就像这样：

image.png

于是继续查找问题发现network中的Perview和Response中的数据也不一致

Preview image.png

// Response
{"code":200,"msg":"请求成功","data":{"E\_INVOICE\_NORMAL":"电子普票","E\_INVOICE\_EXCLUSIVE":"电子专票","VAT\_INVOICE\_NORMAL":"增值税普通发票","VAT\_INVOICE\_EXCLUSIVE":"增值税专用发票","FULL\_E\_INVOICE\_EXCLUSIVE":"增值税专用发票(全电)","FULL\_E\_INVOICE\_NORMAL":"增值税普通发票(全电)"}}

问题找到，浏览器JSON 格式化问题

浏览器在自动JSON格式化时，通常会遵循以下规则：

  1. 缩进：浏览器通常会使用两个空格或四个空格作为缩进符号，以使JSON数据更易于阅读。
  2. 换行：浏览器通常会在每个属性之间添加一个换行符，以使JSON数据更易于阅读。
  3. 排序：浏览器通常会按照属性名称的字母顺序对JSON对象进行排序，以使其更易于比较和查找。

Preview 和 Response 展示形式不同

  • Preview 显示的是浏览器对响应数据进行解析后的结果。这通常会和实际的响应数据有一定的差异,因为浏览器会根据内容类型,对数据进行一定的处理和格式化。
    • 例如,如果响应是 JSON 数据,Preview 会显示格式化及折叠后的 JSON 数据;如果是 HTML,会显示渲染后的内容等。
  • Response 显示的则是网络请求真实得到的原始数据。这些数据未经过浏览器的任何格式化、解析或渲染。所以,对于相同的一个响应,Preview 和 Response 显示的内容可能不同。
    • 举例来说,对于一个返回 JSON 的接口,在 Preview 中你可能会看到格式化的 JSON 数据,而在 Response 中看到的则是字符串形式的原始 JSON 文本。所以,如果你想看到接口真实返回的原始数据,应选择 Response 面板;

Preview 面板

  • 显示格式化和解析后的响应数据
  • 更加美观易读
  • 对 JSON/XML 进行格式化
    • 缩进、换行、排序等,方便阅读
  • 对 HTML 进行渲染,显示渲染后的页面效果
  • 但不会改变:
    1. 数据的值
    2. JSON 的结构(对象嵌套数组等)

Response 面板

  • 显示原始的响应数据
  • 未经任何格式化、解析或渲染
  • 展示真实的响应内容

总结

综上,这两个面板的主要区别在于数据展示形式的不同:Preview 面板:显示格式化和渲染后的内容,更加美观易读。
Response 面板:显示原始的响应内容,未经任何处理。但两者展示的仍然是同一份响应数据,只是形式不同。判断响应内容是否真实相同,应参考 Response 面板中的原始数据。

avatar
文章
阅读
粉丝