旧版MSW(0.36.7)如何让同一请求返回不同响应体？

在MSW 0.36.7版本中，你可以通过以下两种方式实现同一请求多次返回不同响应，无需重置服务器或重新定义请求处理器：

方案1：根据请求的图片ID返回对应URL #

你的API请求包含:id参数，直接根据这个ID映射对应的图片URL是最贴合场景的方式：

// 定义图片ID与URL的映射关系
const imageUrlMap = {
  '1': 'some_image_id_1',
  '2': 'some_image_id_2',
  '3': 'some_image_id_3'
  // 可根据测试需求添加更多映射
};

server.use(
  rest.get(/api/images/:id/, (req, res, ctx) => {
    const imageId = req.params.id;
    // 根据ID获取对应的URL，若不存在可返回默认值或错误
    const imageUrl = imageUrlMap[imageId] || 'default_image_id';
    
    return res(
      ctx.status(HttpStatusCode.Ok),
      ctx.body(JSON.stringify({ url: imageUrl }))
    );
  })
);

这样当组件请求/api/images/1时返回some_image_id_1，请求/api/images/2时返回some_image_id_2，完全匹配你的多图片加载测试场景。

方案2：按请求顺序依次返回不同响应 #

如果不需要根据ID区分，只是需要按调用顺序返回不同响应，可以维护一个计数器或预定义的响应列表：

// 预定义要返回的URL列表
const imageUrls = [
  'some_image_id_1',
  'some_image_id_2',
  'some_image_id_3'
];
// 初始化请求计数器
let requestCount = 0;

server.use(
  rest.get(/api/images/:id/, (req, res, ctx) => {
    // 获取当前请求对应的URL，超出列表长度时可循环或返回默认值
    const currentUrl = imageUrls[requestCount] || 'default_image_id';
    // 计数器自增，准备下一次请求
    requestCount++;
    
    return res(
      ctx.status(HttpStatusCode.Ok),
      ctx.body(JSON.stringify({ url: currentUrl }))
    );
  })
);

这种方式下，第一次调用API返回列表第一个URL，第二次返回第二个，以此类推，适合不依赖ID的测试场景。

两种方案都可以在同一个测试用例中多次调用API，无需修改或重置服务器配置，完全满足你的测试需求。

内容的提问来源于stack exchange，提问作者Romain Gonçalvès