前端调用 yapi 接口时，使用 mock 数据方式 (#121) · Issues · FE / treasure

前端调用 yapi 接口时，使用 mock 数据方式

为什么要使用 mock 数据而不是直接调用接口

mock 接口调用快
mock 接口不会校验数据是否正确，前端在初步联调时无需考虑数据的问题，可以更关注于页面交互
版本开发中，在前中期无法比较顺利给出可以联调的接口
接口一般先写文档再写接口，文档初步定义好了结构和字段后，就可以先照着写一份 mock 数据，而不用等待几天之后的接口完成
后端不稳定的情况时，前端需要获取数据时，可以临时更换为 mock 数据，而不用等待后端修复

如何调用 mock 接口

前端项目内一般默认进行了配置，以邻汇吧后台为例

/**
 * 场地、展位进场资料列表
 * https://yapi.lanhanba.com/project/29/interface/api/33435
 */
export function getCommunitiesMaterials(param, successCallback, errorCallback) {
  const configParams = { isMock: false, mockProjectId: 29 };
  get('/api/inner/communities/materials', param, successCallback, errorCallback, errorCallback, configParams);
}

isMock true 代表调用 mock 接口，使用 mock 数据
mockProjectId 代表 api 的项目 id，如邻汇吧后台为 36，业务中心-订单中台为 420

一般只需要配置这两个参数即可，mock 调用项目中配置了只在开发环境生效。

saas-manage 后台实例

/*
 * 供应商列表
 * https://yapi.lanhanba.com/project/399/interface/api/38947
*/
export function postTenantSupplierListQuery(params?: any) {
  return post('/tenant/supplier/list', { ...params }, {
    isMock: false,
    needHint: true,
    needCancel: false,
    mockId: 399,
    // proxyApi: '/passenger-flow'
  });
};

/*
 * 【供应商联系人信息】列表-不分页
 * https://yapi.lanhanba.com/project/399/interface/api/41656
*/
export function postTenantSupplierContactPageQuery(params?: any) {
  return post('/tenant/supplierContact/list', { ...params }, {
    isMock: false,
    needHint: true,
    needCancel: false,
    mockId: 399,
    // proxyApi: '/passenger-flow'
  });
};