hybrid mock | DolphinHybrid

# hybrid mock 接入规范

定义mock环境变量以及参数

// /.env.mock

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

1
2
3
4

定义启用mock环境的script

// package.json

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

1
2
3
4
5

接口请求处做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(() => {
      })
  })
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

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

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

# 补充情况

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

在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
2
3
4
5
6
7
8
9

在业务接口维护处，为每个接口添加对应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]]
  }
  ...
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

tips:

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