JavaScript Mock 模拟中怎么拦截并替换网络请求接口-js教程-PHP中文网

javascript mock拦截网络请求的核心是劫持请求发起行为，常用方式包括手动拦截xmlhttprequest/fetch、使用msw或axios-mock-adapter，以及devtools临时覆盖；推荐msw（基于service worker，零侵入）或axios-mock-adapter（适配axios实例）。

javascript mock 模拟中怎么拦截并替换网络请求接口

在 JavaScript Mock 中拦截并替换网络请求接口，核心是**劫持请求发起行为**，让原本发向真实服务器的请求被本地模拟逻辑接管。常用方式有三类：基于 XMLHttpRequest 和 fetch 的手动拦截、使用成熟的 Mock 库（如 Mock Service Worker (MSW) 或 axios-mock-adapter），以及浏览器 DevTools 的临时覆盖（仅调试用）。生产级测试或开发联调推荐前两者。

用 MSW 拦截并替换请求（推荐）

Mock Service Worker 是目前最现代、可维护性最强的方案。它通过 Service Worker 拦截浏览器发出的真实网络请求，并返回你定义的模拟响应，对代码零侵入，支持 fetch、XMLHttpRequest、甚至 GraphQL。

安装：npm install msw --save-dev

创建 mock handlers（如 src/mocks/handlers.js）：

import { rest } from 'msw'

export const handlers = [
  rest.get('/api/users', (req, res, ctx) => {
    return res(
      ctx.status(200),
      ctx.json([{ id: 1, name: '张三' }, { id: 2, name: '李四' }])
    )
  }),
  rest.post('/api/login', (req, res, ctx) => {
    const { username } = await req.json()
    return username === 'admin'
      ? res(ctx.status(200), ctx.json({ token: 'mock-jwt-token' }))
      : res(ctx.status(401), ctx.json({ error: '登录失败' }))
  })
]

配置 worker（src/mocks/browser.js）并启动：

import { setupWorker } from 'msw'
import { handlers } from './handlers'

export const worker = setupWorker(...handlers)

// 在入口文件（如 index.js）中启用
if (process.env.NODE_ENV === 'development') {
  worker.start({ onUnhandledRequest: 'bypass' })
}

用 axios-mock-adapter 拦截 Axios 请求

如果你项目统一使用 axios，这个轻量库非常直接——它直接 monkey patch 了 axios 实例的请求方法。

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

安装：npm install axios-mock-adapter --save-dev

在测试或开发环境初始化 mock：

import axios from 'axios'
import MockAdapter from 'axios-mock-adapter'

const mock = new MockAdapter(axios)

mock.onGet('/api/posts').reply(200, [
  { id: 1, title: 'Mock 文章' }
])

mock.onPost('/api/comments').reply((config) => {
  const data = JSON.parse(config.data)
  return [201, { ...data, id: Date.now(), createdAt: new Date().toISOString() }]
})

注意：需确保所有请求都走该 axios 实例；若用了多个实例，需为每个单独配 mock。

手动拦截 fetch / XMLHttpRequest（不推荐用于项目，适合理解原理）

可用于快速验证或极简场景，但难以覆盖边界、不支持异步 handler、易与真实请求冲突。

重写 fetch：

const originalFetch = window.fetch
window.fetch = async function(url, options) {
  if (url.includes('/api/user')) {
    return Promise.resolve({
      ok: true,
      status: 200,
      json: () => Promise.resolve({ id: 999, name: 'Mock 用户' })
    })
  }
  return originalFetch(url, options)
}