在浏览器窗口中显示 Fetch API 响应

Question

我正在使用 Fetch API 来查询一些 Web 服务，因为我需要手动添加

X-Custom

标头。我发现的所有关于显示结果的示例都使用

console.log

进入 DevTools 控制台窗口。

我没有 JavaScript 经验，但这是达到目的的一种手段，所以我：

fetch('<url>', {
    headers: myHeaders,
    method: 'GET',
    credentials: 'include'
}).then(
    function(response) {
        response.json().then(function(data)) {
            console.log(data);
        });
    })

这确实显示到控制台，但我希望它显示在浏览器窗口中，就好像我只是导航到

<url>

并显示响应一样。 JavaScript 是否支持类似以下功能：

fetch('<url>', {
        headers: myHeaders,
        method: 'GET',
        credentials: 'include'
    }).then(
        function(response) {
            response.json().then(function(data)) {
                this.browserWindow.display(data);
            });
        })

如何在浏览器窗口中显示它，就像我通过搜索栏导航到 URL 一样？

更新

所以我已经成功加载了一些结果：

fetch('<url>', {
    headers: myHeaders,
    method: 'GET',
    credentials: 'include'
}).then(
    function(response) {
        response.text().then(function(data)) {
            document.querySelector('body').innerHTML = data
        });
    })

出现响应以供检查；这是一个 JSON 响应，所以我希望

response.Json()

能够工作，但它只显示

[object Object]

。如果我能弄清楚如何“漂亮地显示”JSON，我们就有了一个解决方案。

Answer 1

您已经基本弄清楚了，但是您可以使用

JSON.stringify

来获得更好的格式。为了方便起见，我将结果包装在 HTML

<pre>

标签中，但您可以使用对您的用例有意义的任何内容。

fetch('<url>', {
    headers: myHeaders,
    method: 'GET',
    credentials: 'include'
}).then(
    function(response) {
        response.json().then(function(data) {
            document.querySelector('body').innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`
        });
    })

有一个安全警告需要注意。您直接向 DOM 添加响应，而不清理结果，这可能会导致 XSS 攻击。虽然此代码很容易受到攻击，但考虑到您的用例，它可能只是一个较小的威胁。

对于生产中使用的代码，有多种方法可以防止此漏洞，最常见的是转义要插入 DOM 中的任何字符串。另一种方法是解析结果，并创建您想要插入的 HTML 元素，对 API 提供的内容使用 innerTEXT。