hugh 的个人博客

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等有一定的学习成本