前端实时显示接口返回的JSON数据：流式传输方案

可以使用流式传输（Streaming）的方式来实现实时显示响应体内容，即在接收到一部分数据后就立即显示在页面上，而不需要等到全部数据都返回后再显示。

具体实现方法如下：

在前端使用XMLHttpRequest对象（或fetch API）发送POST请求，并设置responseType为'stream'，以获取可读流（ReadableStream）对象。
在可读流对象上监听'data'事件，当有新的数据到来时，立即更新页面上的内容。
在可读流对象上监听'end'事件，当数据传输结束时，执行一些收尾工作。

以下是一个使用Fetch API实现流式传输的示例代码：

fetch(url, {
  method: 'POST',
  body: data,
  headers: {
    'Content-Type': 'application/json'
  },
  responseType: 'stream'
})
.then(response => {
  const reader = response.body.getReader();
  const decoder = new TextDecoder();
  let result = '';

  reader.read().then(function processText({ done, value }) {
    if (done) {
      console.log('Complete response:', result);
      return;
    }

    result += decoder.decode(value, { stream: true });
    console.log('Received data:', result);

    return reader.read().then(processText);
  });
})
.catch(error => console.error(error));

在上面的代码中，我们使用response.body.getReader()方法获取一个可读流的读取器（ReadableStreamDefaultReader），然后通过调用它的read()方法来获取从服务端返回的一段数据（可能不是完整的JSON数据），并将它转化为字符串。注意，我们使用了TextDecoder API来将二进制数据转化为字符串。

如果读取到的数据还不是完整的JSON数据，那么我们可以再次调用read()方法来获取下一部分数据，直到读取到完整的JSON数据为止。如果读取完成，那么我们就可以在控制台中打印出完整的JSON数据。