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' })