返回Promise至Redux Saga时响应内容异常变更问题

核心原因推测 #

这种现象大概率是对象引用共享导致的意外原地修改，或者浏览器控制台console.log的惰性求值特性造成的误解：

• 当你不返回r时，这个响应对象仅在then回调中被打印，后续没有其他代码引用和修改它，所以控制台展示的是原始数据。
• 当你返回r后，该对象会被传递到Redux Saga的后续流程（比如存入Redux Store或被其他逻辑处理），如果后续代码对这个对象做了原地修改（比如数组reverse()、字符串截断），而console.log打印的是对象引用，展开时读取的是修改后的状态，就会出现你看到的异常。

具体排查与解决步骤 #

1. 验证控制台打印的真实快照
   浏览器控制台打印对象时是惰性求值的，展开时显示的可能是对象当前的状态而非打印时刻的状态。改用JSON.stringify打印快照，确认数据在return前是否已经异常：

const fetchComments = () =>
  fetch(url, {
    method: 'POST',
  })
    .then((r) => r.json())
    .then((r) => {
      // 打印数据的真实快照，避免惰性展示
      console.log('FETCH 快照:', JSON.stringify(r, null, 2));
      //return r;
    });

如果快照显示数据正常，说明问题出在后续代码对对象的修改；如果快照已经异常，再排查响应解析环节。

2. 切断引用，返回深拷贝后的对象
   尝试返回响应对象的深拷贝，避免后续代码修改原始数据：

const fetchComments = () =>
  fetch(url, {
    method: 'POST',
  })
    .then((r) => r.json())
    .then((r) => {
      console.log('FETCH', r);
      // 深拷贝对象，切断与后续流程的引用共享
      return JSON.parse(JSON.stringify(r));
    });

如果这样处理后数据恢复正常，说明原问题确实是后续代码原地修改了原始响应对象。

3. 排查Redux Saga后续处理逻辑
   检查Saga中接收返回值后的代码：

• 是否对items数组调用了reverse()（注意：Array.reverse()是原地修改方法，会直接改变原数组）
• 是否对text属性执行了字符串截取、正则替换等操作，且直接修改了原对象的属性
• 是否有Redux中间件对action payload进行了自动修改

4. 排查响应解析环节
   虽然概率较低，但可以验证响应本身是否正常：

const fetchComments = () =>
  fetch(url, {
    method: 'POST',
  })
    .then((r) => {
      // 检查响应状态是否正常
      if (!r.ok) throw new Error(`HTTP error! status: ${r.status}`);
      return r.text();
    })
    .then((text) => {
      console.log('原始响应文本:', text);
      return JSON.parse(text);
    })
    .then((r) => {
      console.log('解析后的数据:', r);
      return r;
    })
    .catch(err => console.error('Fetch异常:', err));

这样可以确认是响应文本本身就有问题，还是解析过程中出现异常。

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