Storybook.js修改组件状态时处理内部HTTP请求问题求助

你不想修改组件代码来适配Storybook的想法非常合理——组件应该保持自身的业务独立性，不用关心运行环境的差异。下面给你几个完全不需要改动组件代码的解决方案：

1. 使用 Mock Service Worker (MSW) 拦截API请求 #

这是Storybook官方推崇的API模拟方案，它能在浏览器层面拦截所有HTTP请求，返回你预设的模拟数据，完全不会侵入组件内部逻辑。

具体步骤： #

• 首先安装依赖：

npm install msw msw-storybook-addon --save-dev

• 在你的.storybook目录下创建mocks/handlers.js，定义需要拦截的请求和模拟响应：

import { rest } from 'msw';

export const handlers = [
  // 匹配你的组件请求的接口地址
  rest.get('http://www.localhost:8080/api/track/toptracks', (req, res, ctx) => {
    // 返回和真实接口格式一致的模拟数据
    return res(
      ctx.json({
        rows: [
          // 这里放你的模拟数据，比如 { id: 1, name: 'Sample Track' }
        ]
      })
    );
  }),
];

• 在.storybook/preview.js中配置MSW，让它在Storybook启动时自动生效：

import { initialize, mswDecorator } from 'msw-storybook-addon';
import { handlers } from './mocks/handlers';

// 初始化MSW服务
initialize();

// 全局添加MSW装饰器
export const decorators = [mswDecorator];

// 配置全局参数，注入mock处理器
export const parameters = {
  msw: { handlers },
};

这样配置后，当组件在Storybook里发起请求时，MSW会自动拦截并返回模拟数据，组件的componentDidMount逻辑完全不需要改动。

2. 全局替换axios的请求行为（针对axios场景） #

如果你项目里只用axios做请求，可以在Storybook的全局配置里替换axios的方法，实现请求拦截，同样不用修改组件：

在.storybook/preview.js中添加如下装饰器：

import axios from 'axios';

export const decorators = [
  (Story) => {
    // 保存原始的axios.get方法
    const originalGet = axios.get;
    
    // 重写get方法，匹配目标接口时返回模拟数据
    axios.get = (url) => {
      if (url.includes('localhost:8080/api/track/toptracks')) {
        return Promise.resolve({
          data: { rows: [/* 你的模拟数据 */] }
        });
      }
      // 其他请求依然使用原始逻辑
      return originalGet(url);
    };

    return <Story />;
  }
];

这个方法的优势是无需额外安装依赖，适合快速解决问题，但只针对axios有效，通用性不如MSW。

3. 利用Storybook的上下文注入模拟数据（需组件支持props） #

如果你的组件本身支持通过props传入初始数据（比如initialRows），那可以直接在story文件里传入模拟数据，跳过组件内部的请求：

// 你的story文件
export const WithMockData = () => (
  <MyComponent initialRows={[/* 模拟数据 */]} />
);

不过这个方法的前提是组件已经有接收初始数据的props，如果没有的话就需要修改组件，所以优先级不如前两个方案。

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