Mock接口编写教程-axios-mock-adapter(React)
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 启动成功',
})
}
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' })