使用流程

安装依赖

pnpm add msw@latest  --save-dev

描述

Request.handler用于拦截请求和处理对应的响应，可以是真实的响应或者真假的结合体，甚至如果你只是想监控响应速度，也可以不做任何处理。以对GET https://example.com/use为例：

// src/mocks/handler.js
import { http, HttpResponse } from 'msw'
export const handlers = [
  // 拦截 "GET https://example.com/user" 请求...
  http.get('https://example.com/user', () => {
    // ...使用准备好的json数据作为响应
    return HttpResponse.json({
      id: 'c7b3d8e0-5e0b-4b0f-8b3a-3b9f4b3d3b3d',
      firstName: 'John',
      lastName: 'Maverick',
    })
  }),
]

集成

初始化

以nodejs环境为例,编写环境文件进行初始化

//.  src/mocks/node.js
import {setupServer} from 'msw/node'
import {handlers} from './handlers'

export const server=setupServer(...handlers)

官方推荐创建两个不同环境（比如nodejs/浏览器）的集成模块，比如同时创建browser.js/node.js ,他们可以引入相同的handler,但是运行在不同的环境里，对handler进行复用。

启动请求拦截

// /src/index.js
import {server} from './mock/node.js'
server.listen()
// 实际应用：小型node应用，请求网络并打印数据
async function app() {
  const response = await fetch('https://example.com/user')
  const user = await response.json()
  console.log(user)
}
app()

也可以通过判断环境来有条件的启动msw:process.env.NODE_ENV

接下来执行node src/index.js即可在没有进行真实的http的请求下打印mock出来的数据

浏览器环境集成

在浏览器中主要是通过注册Service worker来拦截网络层的请求

service workser本质：

一个运行在浏览器背后的脚本，独立于网页，可以拦截和处理网络请求，管理缓存，支持离线功能

生成worker脚本

npx msw init <PUBLIC_DIR> --save

这个cli会自动将将node_modules中的mockServiceWorker.js复制到项目的public目录,这样他就可以通过

http://localhost:3000/mockServiceWorker访问到脚本内容

设置

import { setupWorker } from 'msw/browser'
import { handlers } from './handlers'
 
export const worker = setupWorker(...handlers)

启动mock

通过worker.start()命令启动这个service worker，由于这是异步操作，所以尽量在注册的promise resolve之后再延迟进行应用的渲染

import React from 'react'
import ReactDOM from 'react-dom'
import { App } from './App'

async function enableMocking() {
  if (process.env.NODE_ENV !== 'development') {
    return
  }
  const { worker } = await import('./mocks/browser').
  //一旦这个service worker准备好进行请求拦截，就会返回以一个resolve状态的promise
  return worker.start()
}
enableMocking().then(() => {
  ReactDOM.render(<App />, rootElement)
})

验证

看开发者工具中的console面板是否有信息：

[MSW] Mocking enabled.

前提

1. node的版本必须大于18
2. 通过npm ls msw命令查看当前msw的版本，npm view msw version查看最新发布的版本看是否需要进行升级