从 Mock Service Worker 请求处理程序生成一个 HTTP 服务器。

2025-06-07

从 Mock Service Worker 请求处理程序生成一个 HTTP 服务器。

Mock Service Worker发布时,就有一个明确的使命:无需创建和维护实际的 HTTP 服务器,即可实现 API 模拟。这项刻意的限制,以及其他一些核心原则,促使成千上万的开发者每天编写声明式、不可知且可复用的模拟代码,构建出令人惊叹的应用程序原型,并满怀信心地交付令人惊叹的产品。

虽然我们的“您不需要模拟服务器”原则至今仍然坚定不移,但我们会密切倾听并分析用户与我们分享的所有重要反馈,以改进项目并增加其可以覆盖的用例数量。

今天,我很高兴向大家介绍我和David Idol合作的一个项目,该项目的目标是将 Mock Service Worker 引入更具挑战性的使用场景。我们将其命名为“http-middleware”。

GitHub 徽标 mswjs / http 中间件

从请求处理程序中生成 HTTP 服务器或使用中间件将其应用到现有服务器。


概念

的前提http-middleware非常简单:重用您的请求处理程序来创建实际的 HTTP 服务器

该项目旨在涵盖标准 Mock Service Worker 方法不足时的更复杂用例。这些用例包括:

  • 向您的模拟定义添加功能curl,例如,用于本地调试;
  • 在复杂的应用程序架构中集成 API 模拟(即使用 dockerized 应用程序)。
  • 原型 Node.js 服务器开发。

请注意,该项目并非API 模拟的首选解决方案,您应该始终优先使用 Mock Service Worker。它旨在处理复杂的用例,您自然会知道何时需要它。经验法则:如有疑问,请优先使用 MSW。

了解有关如何开始使用 MSW 的更多信息。


用法

“http-middleware” 项目非常简洁,我决定现在就在这里写一个简短的使用教程。让我们在 2 分钟内运行一个以你的请求处理程序为核心的服务器。

首先,如果您还没有项目,请创建一个:

$ npm init -y
Enter fullscreen mode Exit fullscreen mode

然后,安装必要的依赖项:

$ npm install express msw @mswjs/http-middleware --save-dev
Enter fullscreen mode Exit fullscreen mode

为了简单起见,我们用一个server.js文件来声明我们的服务器:

$ touch server.js
Enter fullscreen mode Exit fullscreen mode

最后,使用该createServer函数生成一个Express服务器。向其提供您想要负责生成响应的请求处理程序:

// server.js
const { rest } = require('msw')
const { createServer } = require('@mswjs/http-middleware')

const httpServer = createServer(
  rest.get('/', (req, res, ctx) => {
    return res(ctx.text('Hello world'))
  })
)

httpServer.listen(9090)
Enter fullscreen mode Exit fullscreen mode

详细了解如何使用 Mock Service Worker编写请求处理程序。您可以在测试、本地开发和调试中重复使用您编写的处理程序

现在运行你的服务器:

$ node server.js
Enter fullscreen mode Exit fullscreen mode

尝试发出GET http://localhost:9090请求。您将看到响应已根据您指定的请求处理程序进行解析:

200 OK
Content-Type: text/plain;

"Hello world"
Enter fullscreen mode Exit fullscreen mode

完成🎉

添加到现有服务器

或者,您可以通过中间件应用请求处理程序,如果您已经有服务器,这很方便:

// existing-server.js
import { rest } from 'msw'
import { createMiddleware } from '@mswjs/http-middleware'
import { app } from './app'

app.use(
  createMiddleware(
    rest.get('/', (req, res, ctx) => {
      return res(ctx.text('Hello world'))
    })
  )
)
Enter fullscreen mode Exit fullscreen mode

锦上添花

使用请求处理程序作为事实来源,您可以获得与使用 MSW 时相同的好处:跨不同环境和目的共享 API 模拟逻辑。

我再怎么强调干净、确定性的测试环境的重要性也不为过。完全没有必要仅仅因为要在集成测试、端到端测试以及调试一个恼人的数据驱动型 bug 中模拟同一个 API,就安装 3 个不同的库来进行 API 模拟。

Mock Service Worker 允许您编写一次API 模拟,之后可在任何地方重复使用:在开发应用程序时、在 Node.js 中测试时、在 Cypress 中运行自动化测试时以及调试时。所有这些都使用相同的熟悉且一致的语法。不要错过。

GitHub 徽标 mswjs / msw

JavaScript 的行业标准 API 模拟。

拥抱生态系统

通过利用@mswjs/data之类的库,您可以在整个堆栈中重用数据驱动的类型安全 API 模拟。借助 Mock Service Worker 及其生态系统提供的灵活性,您可以以光速开发和迭代您的下一个产品。


后记

我们很期待看到这个小巧的软件包会对您的开发工作流程产生怎样的影响!请务必在 Twitter 上关注 Mock Service Worker,获取最新消息,并了解即将推出的众多功能。

我们也强烈鼓励您在 GitHub 上为该软件包贡献http-middleware您的想法和反馈:

GitHub 徽标 mswjs / http 中间件

从请求处理程序中生成 HTTP 服务器或使用中间件将其应用到现有服务器。

保持精彩❤️

文章来源:https://dev.to/kettanaito/spawn-an-http-server-from-your-mock-service-worker-request-handlers-2c19
PREV
通过响应式网页设计训练营学习掌握 CSS
NEXT
Lessons Learned — A Year Of Going “Fully Serverless” In Production Lessons Learned — A Year Of Going “Fully Serverless” In Production