现代化前端 Mock 数据的方案(MSW+faker.js)

前言

目前前端模拟数据除了通过一些接口调试工具来mock以外,偶尔使用express、nest之类,主要是用mock.js和better-mock,这两个本质是一个东西,后者是因为前者不维护而诞生出的一个分支,支持typescript。本文主要讲另外一种方式,就是通过msw和faker.js实现模拟。msw全称Mock Service Worker,是通过Worker实现的mock模拟前端接口返回。本方式相对来说比较新,也比较优雅。

基础配置

一、官网

MSW -- Seamless API mocking library for browser and Node | Mock Service Worker

二、安装

bash 复制代码
npm install msw --save-dev
# or
yarn add msw --dev

根据npm还是yarn包管理工具进行安装。

三、配置mock列表(./mock/handlers.js)

以下是我添加了单个的mock,实际上,你可以创建多个,方法是rest.post/get等..

req代表请求、res代表返回、ctx代表环境上下文(请求的一些数据)

javascript 复制代码
import { rest } from 'msw'


export const handlers = [
rest.post('/login', async (req, res, ctx) => {
    const { username } = await req.json()

    return res(
        ctx.status(200),
        ctx.delay(1000),
        ctx.json({
        username,
        firstName: 'John'
      })
    )
  }),]

通过ctx.status()可以设置接口返回状态码、通过ctx.delay()可以实现接口延迟,比如弱网测试

四、生成worker脚本

通过cli生成必要的依赖文件到public目录下。

javascript 复制代码
npx msw init <PUBLIC_DIR> --save

这里PUBLIC_DIR就是我们public文件夹的路径,Vite为public(绝大多数框架都是public)

javascript 复制代码
./public

所以,命令是

javascript 复制代码
npx msw init public/ --save

五、创建浏览器的worker

我们要测试是浏览器的环境,所以说需要创建一个浏览器worker:browser.js

javascript 复制代码
// src/mocks/browser.js
import { setupWorker } from 'msw'
import { handlers } from './handlers'

export const worker = setupWorker(...handlers)

六、引入main.js下进行挂载

javascript 复制代码
if (import.meta.env.MODE === 'development') {
  const { worker } = await import("./mock/browser");
  worker.start()
}

七、检查msw集成结果

控制台输出以下内容,代表msw启动成功

javascript 复制代码
[MSW] Mocking enabled

faker.js集成

一、安装依赖和导入

javascript 复制代码
npm install --save-dev @faker-js/faker


import { faker } from '@faker-js/faker';

二、使用简单的方法

javascript 复制代码
export const handlers = [
rest.post('/login', async (req, res, ctx) => {
    const { username } = await req.json()

    return res(
        ctx.status(200),
        ctx.delay(1000),
        ctx.json({
        username,
        firstName: faker.internet.userName()
      })
    )
  }),]

有关faker.js更多API请直接访问faker的git页面,查询。

相关推荐
鲤籽鲲5 分钟前
C# MethodTimer.Fody 使用详解
开发语言·c#·mfc
亚图跨际8 分钟前
Python和R荧光分光光度法
开发语言·python·r语言·荧光分光光度法
jessezappy8 分钟前
jQuery-Word-Export 使用记录及完整修正文件下载 jquery.wordexport.js
前端·word·jquery·filesaver·word-export
Rverdoser16 分钟前
RabbitMQ的基本概念和入门
开发语言·后端·ruby
dj244294570720 分钟前
JAVA中的Lamda表达式
java·开发语言
旧林84336 分钟前
第八章 利用CSS制作导航菜单
前端·css
yngsqq1 小时前
c#使用高版本8.0步骤
java·前端·c#
流星白龙1 小时前
【C++习题】10.反转字符串中的单词 lll
开发语言·c++
尘浮生1 小时前
Java项目实战II基于微信小程序的校运会管理系统(开发文档+数据库+源码)
java·开发语言·数据库·微信小程序·小程序·maven·intellij-idea
MessiGo1 小时前
Python 爬虫 (1)基础 | 基础操作
开发语言·python