获取后如何获得漂亮的显示？答案

【问题标题】：How to get a nice dispay after fetch?获取后如何获得漂亮的显示？
【发布时间】：2022-02-05 05:42:22
【问题描述】：

我正在一些网页中尝试 fetch，以便在项目中使用它。我有一个问题需要解决。

代码如下，我使用 fetch 来访问我的网站 (https://mynicewebsite.example.com)，可能会设置一些选项（标题 ....）... 通过使用 document. getElementById('bdyID').innerHTML = await response.text(); 我在浏览器中显示站点 (https://mynicewebsite.example.com) 的内容。但是这种做法将整个文本显示为一个长的连续字符串。当有人直接访问它时，我怎样才能获得一个漂亮的 HTML 显示来显示该网站，因为它通常会出现在浏览器中。

代码如下：

<!DOCTYPE html>
<html>
<head>
</head>
<body id='bdyID'>
<script>
   const makeFetchCall = async () => {
      const response = await fetch('https://mynicewebsite.example.com', {
         method: 'GET',
         headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer blahfblahdblahzblah',
            //..... // possibly some other things
         }
      });

      document.getElementById('bdyID').innerHTML = await response.text();
   }

   makeFetchCall();
</script>
</body>
</html>

这是上面代码显示的屏幕截图：

这是在浏览器中直接查看https://mynicewebsite.example.com时的显示截图：

【问题讨论】：

不清楚您所说的“漂亮的 HTML 显示”是什么意思。您的服务器不返回相同的 html 吗？为什么看起来会不一样？你是缺少 CSS 还是什么？
'Content-Type': 'application/json' request 标头对于 GET 请求没有意义。
意思是我看帖子里有代码的页面和我直接看mynicewebsite.example.com看到的不一样。但我希望它看起来一样。关于“为什么看起来不一样？”的问题；我想如果我知道答案，我可能不会写这篇文章。
呃，这根本不像 HTML？为什么说html格式，为什么用innerHTML？
是的。它不适用于图像文件，该文件在独立打开时由浏览器以不同方式呈现，并且它也不适用于此 JSON 文件，该文件在独立打开时显示为花哨的树。您的选择似乎是 a) 使用 iframe b) 使用 JSON 树视图库

标签： javascript json fetch-api

【解决方案1】：

我想通过内容类型标头，您可以在响应对象上调用 .json。

const data = await response.json()
const formattedResponse = JSON.stringify(data, null, 2);
document.getElementById('bdyID').innerHTML = formattedResponse;

JSON.stringify 采用三个参数。第三个参数是空格https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

请注意，无论如何，您都可以在 devtools 中看到格式正确的回复。带有 json 和 pre 标签的示例：https://codesandbox.io/s/condescending-platform-f6gj6?fontsize=14&hidenavigation=1&theme=dark

【讨论】：

OPs 代码中的'Content-Type': 'application/json' 标头是请求标头，而不是响应标头。
这就是我说“我想”的原因。通常您有一种文件类型用于在服务器和客户端之间交换信息。如果响应是文本，您可以使用
```
 标签
```
我刚刚尝试了你回答中的代码，但它没有任何区别，我得到的显示和以前一样。
@Michel 我用代码框示例更新了答案。您可以格式化 json，然后将其放入 pre 标记中。