本文主要是介绍现代化前端 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
二、安装
npm install msw --save-dev
# or
yarn add msw --dev
根据npm还是yarn包管理工具进行安装。
三、配置mock列表(./mock/handlers.js)
以下是我添加了单个的mock,实际上,你可以创建多个,方法是rest.post/get等..
req代表请求、res代表返回、ctx代表环境上下文(请求的一些数据)
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目录下。
npx msw init <PUBLIC_DIR> --save
这里PUBLIC_DIR就是我们public文件夹的路径,Vite为public(绝大多数框架都是public)
./public
所以,命令是
npx msw init public/ --save
五、创建浏览器的worker
我们要测试是浏览器的环境,所以说需要创建一个浏览器worker:browser.js
// src/mocks/browser.js
import { setupWorker } from 'msw'
import { handlers } from './handlers'export const worker = setupWorker(...handlers)
六、引入main.js下进行挂载
if (import.meta.env.MODE === 'development') {const { worker } = await import("./mock/browser");worker.start()
}
七、检查msw集成结果
控制台输出以下内容,代表msw启动成功
[MSW] Mocking enabled
faker.js集成
一、安装依赖和导入
npm install --save-dev @faker-js/fakerimport { faker } from '@faker-js/faker';
二、使用简单的方法
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页面,查询。
这篇关于现代化前端 Mock 数据的方案(MSW+faker.js)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!