当前位置: 首页 > article >正文

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


http://www.kler.cn/a/589351.html

相关文章:

  • react18 核心知识点杂记1
  • 需要使用新应用以打开此ms-gamingoverlay链接怎么解决
  • list及其模拟实现
  • 如何管理需求变更
  • Elasticsearch:为推理端点配置分块设置
  • 深入理解蒸馏、Function Call、React、Prompt 与 Agent
  • Redis安装与基础配置:单节点离线部署与配置解析
  • 量子计算助力智能制造:未来工业的加速器
  • 【测试篇】关于allpairs实现正交测试用例保姆级讲解,以及常见的错误问题
  • 相对论之光速
  • 联想拯救者 M600 无线游戏鼠标|自定义驱动程序安装说明
  • 【C++经典例题】反转字符串中单词的字符顺序:两种实现方法详解
  • CMake学习笔记(三):静态库,动态库的生成和使用
  • Python基础入门掌握(十三)
  • Spring源码解析
  • 自然语言处理demo:基于Python的《三体》文本分析
  • 更轻量级的的Knf4j接口文档配置实战
  • 【Linux篇】环境变量与地址空间
  • C++ 类和对象----构造函数
  • 一个简单的RPC示例:服务端和客户端