functionshowError(text){
console.log(text);// show pop...}functioncatchError(err){switch(err.status){case0:showError("网络开小差了,请重试");break;case1:showError("接口请求超时,请重试");break;default:showError(_.get(err,"response.data.message")||"请求数据失败,请稍后再试");break;}}
方案二,数据分离,剥离并封装影响阅读的代码,同时增加注释。但这还不够
getTextAndShow 函数承载了 get text 和 show text 两大功能,这是没有必要的,也不利于单元测试
如果要新增逻辑,很可能就要改动 getTextAndShow 这个核心函数
假如 getTextAndShow 这个函数功能复杂,同时又是新人来修改,就很容易出问题了
代码封装性依然较差,难以复用
var info ={"0":"网络开小差了,请重试","1":"接口请求超时,请重试","error":"请求数据失败,请稍后再试",}functionshowError(text){
console.log(text);// show pop...}//使用了lodash 库中的get方法来查找嵌套对象属性functionexistProperty(obj,property){return _.get(obj,property);}functiongetTextAndShow(info,err){var text = info[err.status];if(!text &&existProperty(err,"response.data.message")){
text = err.response.data.message;};showError(text || info["error"]);}
最终方案
将 get text 和 show text 进行了分离
实现了数据、ui功能和业务逻辑分离
实现了可测试。实际上只需要测试业务代码,即 set 函数即可
实现了链式调用,代码可读性提高,只看调用就知道做了什么事情,有必要才会去关注内部细节
完全实现了复用性。如果有必要,可以改造为构造函数版本,重写set方法,就可以支持更多业务逻辑
实现了可扩展性。如果一个新人,需要增加一条 get text 的逻辑,他可以不必去改动 set 方法的实现,而是新增一个 newSet 方法。可以插入 set 方法最末尾而不去动主逻辑,也可以在调用使用(error.set(err).newSet(err).show();)
var error ={
text:"",
list:{"0":"网络开小差了,请重试","1":"接口请求超时,请重试","error":"请求数据失败,请稍后再试",},
show:function(){
console.log(this.text);// show pop...},//使用了lodash 库中的get方法来查找嵌套对象属性
existProperty:function(obj,property){return _.get(obj,property);},set:function(err){var text =this.list[err.status];if(!text &&this.existProperty(err,"response.data.message")){
text = err.response.data.message;}this.text = text ||this.list["error"];returnthis;}}var err ={
status:1,
response:{
data:{
message:"服务端定义的msg"}}}// 调用
error.set(err).show();