hybrid mock 接入规范

hybrid mock 接入规范

1. 定义mock环境变量以及参数

// /.env.mock

VUE_APP_ENV = 'mock'
VUE_APP_BASE_URL = 'https://yapi.smartmidea.net/mock/xxx'

1. 定义启用mock环境的script

// package.json

"script": {
  "serve:mock": "vue-cli-service serve --mode mock",
}

1. 接口请求处做mock环境判断

// src/utils/request.js
function sendRequestToCentralCloud(
  requestParam = {}
) {
  let finalParam = {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json;charset=utf-8',
    },
    ...requestParam,
  }

  // 在mock环境下，新增mock请求origin，将不会请求到中台，转而请求yapi服务
  // 此功能已规划但尚未落地，后续将补充落地生效的美居版本
  if(process.env.VUE_APP_ENV === 'mock') {
    finalParam.mockService = process.env.VUE_APP_BASE_URL
  }

  return new Promise((reslove, reject) => {
    singletonBridge
      .sendCentralCloudRequest(finalParam)
      .then((res) => {
        if (res.code == 0) {
          reslove(res)
        } else {
          reject(res)
        }
      })
      .catch((error) => {
        reject(error)
      })
      .finally(() => {
      })
  })
}

完成上述操作后，在对应终端，执行 npm run serve:mock 即可切换到mock环境

tip:
以上代码基于 @dolphin-iot/cli 脚手架中 MPA 多页面模版 【vue2.x】 模板创建的项目代码进行的修改，查看详情(opens new window)

#补充情况

• 项目中存在多yapi源，或者部分接口满足yapi mock 的情况
  改进措施：

  1. 在mock文件中维护设置多个yapi源，并设置开启对应的条件值

  // .env.mock
  
  VUE_APP_ENV = 'mock' // 是否是mock 环境
  
  VUE_APP_BASE_URL_OPEN = false
  VUE_APP_BASE_URL = 'https://yapi.smartmidea.net/mock/001'
  
  VUE_APP_BASE_URL_SENCE_OPEN = false
  VUE_APP_BASE_URL_SENCE = 'https://yapi.smartmidea.net/mock/002'
  

  1. 在业务接口维护处，为每个接口添加对应yapi源以及开启条件

  // src/utils/request.js
  
  // 业务接口维护
  const serveList = {
    getUserList: {
      url: 'xxxx',
      openMock: 'VUE_APP_BASE_URL_OPEN',
      mockOrigin: 'VUE_APP_BASE_URL'
    }
  }
  ...
  
  // 在原本添加 mockService 添加接口对应的yapi源
  
  // 场景1； 请求方法中传入的是接口地址，而不是对应的key
  function sendRequestToCentralCloud(requestParam = {}, options = { showLoading: true }) {
    ...
    let finalParam = {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json;charset=utf-8',
      },
      ...requestParam,
    }
    // 新增： 遍历查找接口地址对应的配置对象，判断是否存在yapi源
    const url = requestParam.url
    const apiKey = Object.keys(serveList).find(key => {
      return serveList[key].url === url
    })
    const apiObj = serveList[apiKey] || null
    const env = process.env
    if(env.VUE_APP_ENV === 'mock' &&
      apiObj && apiObj.openMock && apiObj.mockOrigin &&
      env[apiObj[openMock]] && env[apiObj[mockOrigin]]) {
      finalParam.mockService = env[apiObj[mockOrigin]]
    }
  
    return new Promise((reslove, reject) => {
      singletonBridge
        .sendCentralCloudRequest(finalParam)
        .then((res) => {
          ...
        })
    })
  }
  
  // 场景2：传入的serveList的key，在请求函数中，通过key 查找对应的接口地址以及相关配置项
  // 项目中，更推荐这种封装方式，便于对接口做配置化操作
  
  function sendRequestToCentralCloud(apiKey, requestParam = {}, options = { showLoading: true }) {
    ...
    const apiObj = serveList[apiKey]
    finalParam.url = apiObj.url
  
    const env = process.env
    if(env.VUE_APP_ENV === 'mock' &&
      apiObj && apiObj.openMock && apiObj.mockOrigin &&
      env[apiObj[openMock]] && env[apiObj[mockOrigin]]) {
      finalParam.mockService = env[apiObj[mockOrigin]]
    }
    ...
  }
  

  tips:

  1. 对每个接口做参数配置，采用数组和对象皆可，基于项目中的原本的请求封装做灵活改动
  2. 上述中，仅对sendCentralCloundRequest接口做demo展示，其余原生业务请求后端接口参照上述改动即可