如何使用Mock Service Worker拦截接口响应并修改JSON字段？

先明确你代码里的核心问题 #

你之前的写法完全错误，MSW 的 res 方法需要配合 ctx.json() 来返回响应体，不能直接传入回调操作 res；另外你写的接口路径 */users 和目标接口 /user 不匹配，这也是导致响应体为 Null 的可能原因。

下面分两种常见场景给出正确实现：

场景1：直接模拟修改后的响应（无需调用真实后端） #

如果不需要请求真实接口，直接构造修改好的数据返回：

rest.get('/user', (req, res, ctx) => {
  // 构造修改后的响应结构
  const modifiedResponse = {
    users: [{
      user: {
        name: 'John',
        age: 31,
        occupation: 'Student' // 替换为目标字段值
      }
    }]
  };

  return res(ctx.json(modifiedResponse));
});

如果原接口是 POST 请求，把 rest.get 换成 rest.post 即可，逻辑完全一致。

场景2：拦截真实后端响应并修改字段 #

如果需要先获取真实后端的原始响应，再修改指定字段返回：

rest.get('/user', async (req, res, ctx) => {
  // 发起真实请求获取原始数据
  const originalRes = await fetch(req.url);
  const originalData = await originalRes.json();

  // 修改目标字段
  originalData.users[0].user.occupation = 'Student';

  // 返回修改后的响应
  return res(ctx.json(originalData));
});

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