Vue Axios 网络请求怎么在测试环境中使用 MSW 拦截并模拟网络请求-Vue.js-PHP中文网

msw通过service worker或node.js拦截器在网络层模拟axios请求响应，无需修改业务代码；需用绝对url匹配handler、保持baseurl一致，并在测试中启用server.listen。

vue axios 网络请求怎么在测试环境中使用 msw 拦截并模拟网络请求

Vue 项目中用 Axios 发起网络请求时，测试环境里直接调用真实接口会导致不稳定、不可控、难复现问题。MSW（Mock Service Worker）能真正“拦截”请求，在网络层模拟响应，不改业务代码，也不依赖真实后端。关键在于：Axios 请求照常发，MSW 在底层悄悄接管并返回预设数据。

MSW 拦截 Axios 请求的核心逻辑

MSW 并不修改 Axios 行为，而是通过浏览器的 Service Worker（前端）或 Node.js 的请求拦截器（测试环境）捕获所有 fetch 和 XMLHttpRequest 请求——而 Axios 底层正是基于这两者之一（浏览器中用 XMLHttpRequest，Vite/Vue3 默认构建下也兼容 fetch）。只要 Axios 发出的请求路径与 MSW handler 匹配，就会被拦截并返回模拟响应。

正确配置 MSW 测试环境（以 Vitest + Vue Test Utils 为例）

不 mock axios 实例本身（避免绕过真实请求流程），而是让 MSW 真实拦截 HTTP 调用
所有 handler 必须使用与生产环境完全一致的 URL 和 method（如 rest.post('https://api.example.com/login')）

npm install msw --save-dev

在 src/mocks/handlers.ts 中定义：

import { rest } from 'msw'

export const handlers = [
  rest.post('https://api.example.com/login', (req, res, ctx) => {
    const { username, password } = req.body as { username: string; password: string }
    if (username === 'admin' && password === '123') {
      return res(
        ctx.status(200),
        ctx.json({ token: 'mock-jwt-token', user: { id: 1, name: 'Admin' } })
      )
    }
    return res(ctx.status(401), ctx.json({ message: 'Invalid credentials' }))
  }),
]

在 vitest.setup.ts（或测试入口文件）中启用：

check-vue-style

检查 .vue 单文件组件的 CSS 规范问题并给出提示，适用于样式检查、CSS审查和 Vue 页面质量巡检。

下载

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

const server = setupServer(...handlers)

beforeAll(() => server.listen({ onUnhandledRequest: 'error' }))
afterEach(() => server.resetHandlers())
afterAll(() => server.close())

组件中正常使用 Axios（无需任何测试特供逻辑）

比如 LoginForm.vue：

<script setup>
import { ref } from 'vue'
import axios from '@/utils/request' // 你封装的 axios 实例

const loading = ref(false)
const login = async (data) => {
  loading.value = true
  try {
    const res = await axios.post('/login', data) // 注意：这里用的是相对路径
    console.log(res.data)
  } catch (err) {
    console.error(err.response?.data)
  } finally {
    loading.value = false
  }
}
</script>

⚠️ 注意：若你封装的 axios 实例设置了 baseURL: 'https://api.example.com'，那么 axios.post('/login') 实际发出的请求 URL 就是 https://api.example.com/login —— 这正是 MSW handler 中要匹配的完整地址。

针对不同 baseURL 场景的适配建议

如果开发/测试环境 baseURL 是动态的（如 import.meta.env.VUE_APP_API_BASE），MSW handler 必须用相同值，否则无法匹配
更稳妥做法：统一用绝对 URL 写 handler（如 rest.post('https://api.example.com/login', ...)），并在 axios 实例中固定 baseURL，避免环境差异导致拦截失效