Solo  当前访客:3 开始使用

前端mock策略


1、简单mock

如果只是数据的简单mock, 建议包装ajax或者fetch,在请求之前通过读取mock数据,来返回mock结果

eg:根据请求参数,获取mock数据

 var getMockByUrl = function (mock, url, pdata) {
      if(!url){
        return null;
      }
      // url中解析出queryString部分
      var urlArr = url.split("?"),path="",queryStrings=[], queryMockType="";
      if(urlArr.length>=1){
        path = urlArr[0];
        queryStrings = urlArr[1]?urlArr[1]:"";
        if(queryStrings){
          var reg = new RegExp("(^|&)" + "mocktype" + "=([^&]*)(&|$)", "i");
          var r = queryStrings.match(reg);
          if (r != null)  queryMockType = r[2];
        }
      }
      var data = mock[path] || mock[url];
      if(!queryMockType){
        queryMockType = pdata? pdata["mocktype"]: null;
      }
      if(data){
        if(queryMockType){
          data = data[queryMockType];
        }else{
          data = data.hasOwnProperty("defaultResult")? data["defaultResult"] : data;
        }
      }
      return data;
    }

 

优点: 纯前端就可以完成,简单便捷, 兼容性好

缺点:缺乏灵活性, 不能真实模拟请求过程, 对复杂情况的mock需要在业务中增加耦合性高的测试代码

: mock数据来源 可以使用mock.js生成

2、基于serviceWorker的请求拦截

安装serviceWorker之后, 通过监听fetch来对结果做响应的处理

self.addEventListener('fetch', function(event) {
  event.respondWith(
    return cacheData || fetch(testUrl)
 )
})

优点:模拟真实请求

缺点: 复杂性提高,灵活性不高

 

3、基于代理服务的mock

可以使用charles等工具,对请求做拦截

优点: 灵活性高、复杂度也较低

缺点: 多人协作情况下,数据同步是个问题。 

 

4、自建mock服务

基于yapi的mock server

优点: 前端可以完成mock的设置、复杂度低、灵活性也较高, 可以为前端e2e测试等提供数据基础

缺点: 高级mock等有一定的学习成本


标题:前端mock策略
作者:hugh0524
地址:https://blog.uproject.cn/articles/2018/04/15/1523766437851.html

, , , , , 0 0