Mock Service Worker简介

Mock Service Worker 是一个 API 模拟库，它使用 Service Worker API 来拦截实际请求。

注意：Service Worker 只能在浏览器环境中工作。在 Node.js 环境中，MSW 利用 Node.js 的请求拦截器库，并允许重用来自浏览器环境的相同模拟定义。

什么是Service Worker

MSW 依赖于 Service Worker，Service Worker 本质上是浏览器在后台运行的脚本，它是完全独立于它正在处理或服务的网页。它们充当了 web 应用程序、浏览器和网络之间的代理服务器，目的是为前端应用程序创建一个良好的离线体验，关于 Service Worker 的更多内容可以参阅《ServiceWorker工作原理、生命周期和使用场景》。而 MSW 就是建立在 Service Worker 的缓存机制之上的。

以下是Mock Service Worker的使用实践

1，安装

``

npm install msw --save-dev
# or
yarn add msw --dev

2，创建handlers.js，主要为定义API逻辑的代码

// src/mocks/handlers.js
import { rest } from "msw";

export const handlers = [
  rest.post("/login", (req, res, ctx) => {
    // Persist user's authentication in the session
    sessionStorage.setItem("is-authenticated", "true");

    return res(
      // Respond with a 200 status code
      ctx.status(200),
      ctx.json({
        name: "jxh",
      })
    );
  }),

  rest.get("/user", (req, res, ctx) => {
    // Check if the user is authenticated in this session
    const isAuthenticated = sessionStorage.getItem("is-authenticated");

    if (!isAuthenticated) {
      // If not authenticated, respond with a 403 error
      return res(
        ctx.status(403),
        ctx.json({
          errorMessage: "Not authorized",
        })
      );
    }

    // If authenticated, return a mocked user details
    return res(
      ctx.status(200),
      ctx.json({
        username: "admin",
      })
    );
  }),
];

3，创建browser.sj文件，使用 handlers.js 中的代码初始化模拟的 service worker

// src/mocks/browser.js
import { setupWorker } from 'msw'
import { handlers } from './handlers'

// This configures a Service Worker with the given request handlers.
export const worker = setupWorker(...handlers)

4，项目中引入mock代码逻辑，在项目的入口文件main.js中加入以下代码， 以下以vue3项目为例的示例代码：

import { createApp } from "vue";
import pinia from "@/stores/store";
import App from "./App.vue";
import router from "./router";
import "./assets/main.css";
import worker from "./mocks/browser";
if (import.meta.env.MODE === "development") {
  worker.start();
}
const app = createApp(App);
app.use(pinia);
app.use(router);
app.mount("#app");

5，在public文件夹下生成service worker 脚本

npx msw init ./public

或者

npx msw init ./public --save

添加了--save参数后， service worker的目录信息会显示在package.json文件中

{
  "name": "your-app",
  "msw": {
    "workerDirectory": "public"
  }
}