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