如何将Fetch API请求的响应结果直接美化展示在浏览器窗口中

核心问题说明 #

使用response.json()处理响应后得到的是JavaScript对象，直接将对象赋值给innerHTML时，浏览器会自动调用对象的toString()方法，最终就会输出[object Object]，无法展示实际的JSON内容。

美化展示JSON的实现方案 #

你可以通过JSON.stringify()方法将JS对象序列化为带缩进的格式化字符串，搭配<pre>标签保留格式，即可实现和浏览器地址栏直接访问JSON接口一致的展示效果，同时修正了你原有代码的语法错误：

fetch('<url>', {
    headers: myHeaders,
    method: 'GET',
    credentials: 'include'
}).then(function(response) {
    // 校验请求是否成功
    if (!response.ok) {
        throw new Error('请求异常，状态码：' + response.status);
    }
    return response.json();
}).then(function(data) {
    // JSON.stringify第三个参数为缩进空格数，填2或4都可以，控制格式化后的缩进效果
    const formattedJson = JSON.stringify(data, null, 2);
    // 使用pre标签包裹格式化后的字符串，保留缩进换行格式
    document.body.innerHTML = `<pre>${formattedJson}</pre>`;
}).catch(function(error) {
    // 异常捕获，请求出错时也能在页面看到提示信息
    document.body.innerHTML = `请求出错：${error.message}`;
});

如果需要更贴近浏览器默认JSON展示页的视觉效果，可以给<pre>标签增加简单的内联样式，将写入页面的代码替换为下面的写法即可：

document.body.innerHTML = `<pre style="background: #f5f5f5; padding: 16px; border-radius: 4px; overflow-x: auto; font-size: 14px;">${formattedJson}</pre>`;

内容的提问来源于stack exchange，提问作者user7811364