当我打开浏览器的网络选项卡时，msw mockServiceWorker.js 资源仍处于“待定”状态

Posted 2023-02-21

【中文标题】当我打开浏览器的网络选项卡时，msw mockServiceWorker.js 资源仍处于“待定”状态

【英文标题】：msw mockServiceWorker.js resource remains in a"pending" status when I open the network tab of my browser

【发布时间】：2021-07-26 07:56:30

【问题描述】：

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

环境

Name	Version
msw	0.28.2
browser	Chrome 90.0.4430.93
OS	Windows 10

请求处理程序

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

// 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);
      
    

【参考方案1】：

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

webpack --mode production

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

npx msw init public

这解决了问题?