FEmocker

一个专门为mock接口而生的插件，让前端从此不再等待，不再报错；

如果后端服务不太稳定，经常需要等待环境调试； 如果需要为整个前端应用演示完整的流程，但是接口数据比较难配合； 那么可能你需要一个完全可控的开箱即用的mock工具。

亮点

• 自动记录本地接口返回值
• 可视化配置mock接口
• 支持单个接口控制
• 支持项目全流程mock
• 支持导入导出数据

使用

npm i femocker -S

此项目依赖一些常用库，需要自行安装

"element-plus": "^2.8.8",
"pinia": "^2.2.6",
"vue": "^3.5.13",

接入 pinia 仓库

import { FEmockerStoreSetup } from "femocker";

FEmockerStoreSetup(store);

接入 axios 拦截器

• 初始化FEmockerHttp
• 在请求错误拦截器中返回mock数据，避免后端错误
• 在响应拦截器中配置，返回mock数据
• 推荐只在 development 环境下使用mock

import { FEmockerHttp } from "femocker";
const mockerHttp = new FEmockerHttp();

interceptors.request.use(
    (config) => {
        ...
    },
    error => {
        // 发起请求错误
        if (import.meta.env.MODE === "development") {
          let mockData = mockerHttp.getMockerData(error.url);
          if (mockData) return Promise.resolve(mockData);
        }
    }
)

instance.interceptors.response.use(
    (response) => {
        ...
        // 获取mocker缓存数据
        if (import.meta.env.MODE === "development") {
          let mockData = mockerHttp.getMockerData(response.config.url, response.data);
          if (mockData) {
            response.data = mockData;
          }
        }
    },
    (error) => {
        // mock响应错误数据
        if (import.meta.env.MODE === "development") {
          let mockData = mockerHttp.getMockerData(url);
          if (mockData) return Promise.resolve(mockData);
        }
    }
)

• mockerHttp.getMockerData(apiUrl, res = null)
  • apiUrl: 请求url，用于匹配缓存或者mock数据
  • res: 后端响应数据，可不传

接入可视化页面

import { FEmockerPage } from "femocker";
import 'femocker/dist/style.css';

<FEmockerPage />

测试用例

• [x] 关闭插件，不mock
• [x] 开启插件，走mock
  • [x] 全流程mock ？ 所有接口都走mock
  • [x] 单个开启，单个mock
• [x] 开启自动录入？新接口会自动记录
• [x] 自己定义返回值？ mock 时会返回自定义值
• [x] 只填了api没有填自定义数据，请求接口后自动缓存
• [x] 可导入导出apis