nodejs学习: msw/mock/sw 数据的方案、worker

一个方便做数据 mock 的方案

原理

Mock Service Worker is an API mocking library that uses Service Worker API to intercept actual requests.

安装

yarn add --dev msw

main.ts

初始化 msw，并添加配置。

import ReactDOM from 'react-dom/client';
import StateProvider from '@jswork/react-tiny-state';
// ... 省略 ...
import { worker } from '@/__mocks__/browser';

const element = document.getElementById('root') as HTMLElement;
const root = ReactDOM.createRoot(element);
const env = import.meta.env;

if (env.DEV) worker.start({ onUnhandledRequest: 'bypass' });

root.render(
  <Provider>
    <StateProvider store={stores}>
      <ConfigProvider locale={language}>
        <App />
      </ConfigProvider>
    </StateProvider>
    <VitePwaPromotion useRegisterSW={useRegisterSW} />
  </Provider>
);

mocks

src/__mocks__ 目录情况
实际业务中，重点就在 handlers

src
├── __mocks__
│   ├── browser.js
│   ├── handlers.js
│   └── server.js

hello api

写一个 api 的 mock，第一个 API 的 mock

import { rest } from 'msw';

export const handlers = [
  rest.post('/api/self/containerTask/page', (req, res, ctx) => {
    return res(
      ctx.json({
        data: {
          rows: [
            { id: 1 },
            { id: 2 }
          ],
          total: 10
        }
      })
    );
  })
];

原理

安装

main.ts

mocks

hello api

参考