前端mock数据

阅读 1544
收藏 0
2018-04-15
原文链接: blog.uproject.cn

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