简单网站设计容城网站建设

Mock模拟接口编写教程

直接在前端实现接口模拟

1.第一步 设置模拟接口

// mock.ts
import axios from 'axios'
import MockAdapter from 'axios-mock-adapter'// 创建一个模拟适配器
const mock = new MockAdapter(axios)// 设置模拟接口
export const setupMock = () => {mock.onPost('/api/engine/node/query').reply(config => {const { dagId, nodeId } = JSON.parse(config.data)if (dagId === 'text_processing' && nodeId === 'python_node_01') {return [200,{status: 'success',msg: '查询成功',node_status: 'running',},]} else {return [400,{status: 'error',msg: '未找到对应的节点',node_status: 'unknown',},]}})mock.onPost('/api/engine/dag/startup').reply(200, {status: 'success',msg: 'DAG 启动成功',})// 关键修复：允许其他所有请求直接发送到服务器mock.onAny().passThrough() // 新增这行代码
}

Bug修复：解决自定义节点被拦截 

  // 关键修复：允许其他所有请求直接发送到服务器mock.onAny().passThrough() // 新增这行代码

 

2.第二步 开启模拟接口

import { setupMock } from './api/mockApi.ts' // 引入模拟请求
setupMock() // 启用模拟请求

3.第三步 导出接口访问方式

忽略any。。。。公司项目不暴露接口类型

// 创建真实请求的接口
export const queryNode = (data: any) => {return axios.post('/api/engine/node/query', data)
}export const startDag = (data: any) => {return axios.post('/api/engine/dag/startup', data)
}

4.第四步 使用接口

import { queryNode, startDag } from '../../api/mockApi'const response = await queryNode({ dagId: 'text_processing', nodeId: 'python_node_01' })