Mock模拟数据接口-Mock Service Worker

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前文学习了 Vue 组件化开发之: 基于 iviewUI 组件库的日期选择组件的二次封装.

当然在使用 Vue进行前端项目开发时, 需要我们为适应项目需求进行的二次封装有很多, 这里不作一一介绍了.

接下来学习 前端数据接口模拟工具.

为何要用到数据接口模拟

在现代项目开发过程中, 现代项目一般都是采用前后端分离的开发模式, 这样就免不了后端接口提供不及时不同步的情况, 但是前端开发任务也要继续进行呀. 所以前端也需要自己模拟后端数据接口进行提前开发, 等后端开发后提供了接口, 再配置一下即可. 这样可以大大提高开发效率

现代化的数据接口模拟工具 Mock Service Worker(MSW)

Mock Service Worker is an API mocking library for browser and Node.js that uses Service Workers to allow your requests to actually happen with no stubs, down to each tiniest request client detail, and intercept them at the network level.

Mock Service Worker

【github 源码】： github/mswjs

【官网】： mswjs.io

【文档】： hoppscotch.io

MSW 使用

使用也很简单: 安装 引入 注册 编写简单的代码即可启动一个服务, 后续复杂需求可根据项目具体开发:

import { setupWorker, rest } from 'msw'
interface LoginBody {
  username: string
}
interface LoginResponse {
  username: string
  firstName: string
}
const worker = setupWorker(
  rest.post<LoginBody, LoginResponse>('/login', (req, res, ctx) => {
    const { username } = req.body
    return res(
      ctx.json({
        username,
        firstName: 'John'
      })
    )
  }),
)
worker.start()

启动项目, 访问 /login 路由即可