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 启动成功',
  })
  // 关键修复：允许其他所有请求直接发送到服务器
  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' })