0

我在我的项目中使用 msw 来模拟获取 API 请求，我检查了网络选项卡，并且 mockServiceWorker.js 资源保持在“待处理”状态，此外，响应检索 index.html 而不是我在处理程序中模拟的 JSON 响应文件。也许我遇到了一个愚蠢的错误，但我没有在网上找到可以帮助我的资源，在此先感谢！

环境

姓名 版本
生活垃圾 0.28.2
浏览器 铬 90.0.4430.93
操作系统 视窗 10

请求处理程序

我"dev": "webpack serve --mode development",在 CLI 中运行，这些是我的配置

// index.tsx
...
if (process.env.NODE_ENV === 'development') require('./mocks/browser');

const rootElement = document.getElementById('app');

ReactDOM.render(<ThemeProvider><App /></ThemeProvider>, rootElement);

// ./mock/browser.ts
import { setupWorker } from 'msw';
import { handlers } from './handlers';

const worker = setupWorker(...handlers);

worker.start();

// handlers
import { rest } from 'msw';

const baseURL = 'http://localhost:8080';

const handlers = [
  rest.get(`${baseURL}/navlink-routes`, (_req, res, ctx) => res(
    ctx.status(200),
    ctx.json({
      result: [
        { label: 'Shop', path: 'shop' },
        { label: 'Wishlist', path: 'wishlist' },
        { label: 'Checkout', path: 'checkout' },
      ],
    }),
  )),
  rest.get('*', (req, res, ctx) => res(
    ctx.status(500),
    ctx.json({ error: `Please add request handler for ${req.url.toString()}` }),
  )),
];

export { handlers };

实际要求

// Example of making a request. Provide your code here.
async function getData(): Promise<void> {
      try {
        const response = await fetch('http://localhost:8080/navlink-routes', { signal });

        if (!response.ok) throw new Error(`Server error ${response.status}`);

        const { result } = await response.json();
        setLinkList(result);
      } catch (e) {
        if (e.name !== 'AbortError') setError(true);
      }
    }
4

1 回答 1

1

感谢@kettanaito，我意识到我没有正确设置公共目录我正在使用我为生产目的创建的 dist 目录调用：

webpack --mode production

按照建议，我创建了一个新的 public/ 目录并调用：

npx msw init public

这解决了问题

于 2021-05-04T16:45:47.903 回答