Express接口返回ReadableStream而非JSON的原因排查

问题描述 #

使用Express创建API接口时，通常调用res.json()会返回JSON对象供客户端直接解析，但在通过批量Promise处理数据后返回对象，客户端收到的响应body却是ReadableStream，而非预期的JSON对象。

相关代码 #

辅助函数 #

const addCoinVolumeData = async (data) => {
  const promises = data.map(async datum => {
    const volumeData = await fetchCoinGeckoCoinVolume(datum.id);
    const volumeDelta = calculateCoinVolumeDelta(volumeData);
    datum.volume_change_24h = volumeDelta;
    return datum;
  });

  const result = await Promise.all(promises);
  return result;
}

接口响应代码 #

data = await addCoinVolumeData(data);
res.json(data);

客户端接收的响应内容 #

Response {type: 'basic', url: 'http://localhost:3001/aggregate-coin-data', redirected: false, status: 200, ok: true, …}
body: ReadableStream
bodyUsed: false
headers: Headers {}
ok: true
redirected: false
status: 200
statusText: "OK"
type: "basic"

问题原因 #

这并非服务端代码的问题，而是客户端对Fetch API返回的Response对象处理不当导致的。浏览器Fetch API返回的Response对象本身包含ReadableStream格式的body，需要主动调用解析方法才能得到JSON对象。

解决方案 #

客户端在获取到Response后，需要调用.json()方法将ReadableStream解析为JSON对象，示例代码如下：

链式调用写法 #

fetch('http://localhost:3001/aggregate-coin-data')
  .then(response => response.json()) // 关键步骤：解析响应为JSON
  .then(jsonData => {
    // 此处可处理解析后的JSON数据
    console.log(jsonData);
  })
  .catch(error => console.error('请求或解析出错:', error));

Async/Await写法 #

async function fetchCoinData() {
  try {
    const response = await fetch('http://localhost:3001/aggregate-coin-data');
    const jsonData = await response.json(); // 解析响应为JSON
    console.log(jsonData);
  } catch (error) {
    console.error('请求或解析出错:', error);
  }
}

fetchCoinData();

说明：服务端的res.json()已经正确设置了Content-Type: application/json响应头，并将数据序列化为JSON字符串返回，只需客户端补充解析步骤即可拿到预期的JSON数据。

内容的提问来源于stack exchange，提问作者collide.in.scope