FEmocker

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

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

亮点

• 自动记录本地接口返回值
• 可视化配置 mock 接口
• 支持单个接口控制
• 支持项目全流程拦截
• 支持导入导出api数据，方便保存
• 支持搜索，新增

使用

npm i femocker -S

此项目依赖 vue3，需要自行安装

"vue": "^3.5.13",

接入 axios,

在接口正确返回时自动缓存数据，在开启全流程时返回缓存数据

import { FEmockerHttp, wait } from 'femocker'
const mockerHttp = new FEmockerHttp()

const axiosConfig = {
    method,
      url,
      param,
} 
return new Promise(async (resolve, reject) => {
  // 如果开启了全流程
  if (FEmockerHttp.globalConfig.isGlobalMock) {
    // 等待插件初始化
    while (!FEmockerHttp.isInit) {
      await wait()
    }
    // 获取mocker 数据返回，不再走axios请求
    const mockerData = mockerHttp.getMockerData(axiosConfig.url)
    if (!mockerData) return reject(`没有找到对应的mocker数据: ${axiosConfig.url}`)
    console.log(`用的mocker数据: ${axiosConfig.url}`)
    return resolve(mockerData)
  }
  axios.axiosInstance
    .request(axiosConfig)
    .then((response) => {
      // 接口返回正确数据，自动记录
      if (FEmockerHttp.globalConfig.autoRecord) {
        mockerHttp.getMockerData(axiosConfig.url, response)
      }
      resolve(response)
    })
    .catch(error => {
      reject(error)
    })
})

api用法说明

• FEmockerHttp.globalConfig.isGlobalMock // 判读是否开启了插件
• FEmockerHttp.globalConfig.autoRecord // 是否开启自动记录
• FEmockerHttp.isInit // 是否已经初始化
• mockerHttp.getMockerData(api, response); //
• mockerHttp.getMockerData(apiUrl, response = null)
  • apiUrl: 请求 url，用于匹配缓存或者 mock 数据
  • response: 后端响应数据， 传入 response 则写入数据库，不传则返回 mockerData

接入可视化页面

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