使用TS编写职责链模式优化请求返回数据处理中if判断——前端开发小技巧

一、场景

在前端日常开发中&＃xff0c;经常会根据返回的状态码判断进行相应的数据操作。在then中充斥着大量的if&＃xff0c;这使代码非常耦合并且不直观&＃xff08;如图1.1&＃xff09;&＃xff0c;在以后维护中也是非常让人头疼。所以今天来优化一下代码
图1.1 对请求返回的数据判断然后进行相应数据操作

根据图1.1可以发现里面有多个if/else判断。可能大家会觉得图1.1里面的if/else数量还行&＃xff0c;不需要优化&＃xff0c;但是如果在后期中再加入多个if判断的话&＃xff0c;then中整体的if/else会比较多。如果是自己开发的项目可以随意些&＃xff0c;但是如果是多人开发的项目&＃xff0c;在日后其他人维护起来因为有多个if/else判断&＃xff0c;维护成本会提高&＃xff0c;代码也变得不易读懂。例如图1.2

图1.2 then中大量的if/else判断

二、优化

所以我们需要优化代码&＃xff0c;把没必要的if去掉。把代码变得可维护。这里使用模式设计中的职责链模式进行优化

1. 首先 声明接口&＃xff0c;定义两个方法

接口名称定为RequestHandle&＃xff0c;里面有需要类进行实现的setNext和handle方法。其中setNext方法用于把各各处理类实例串成一个链条&＃xff0c;handle方法用来处理请求

interface RequestHandle{setNext(handle:RequestHandle):RequestHandle;handle(request:any,vueThis:Vue,arg:any):boolean;
}


2.抽象类实现定义的接口&＃xff0c;为子类继承提供方法

注意:抽象类中没有使用abstract来修饰方法&＃xff0c;也就是说不需要子类实现&＃xff0c;直接可以继承

abstract class AbstractRequestHandle implements RequestHandle{private nextHandler:RequestHandle;//声明私有变量&＃xff0c;用于存储handlesetNext(handle:RequestHandle):RequestHandle{this.nextHandler&＃61;handle;return handle;}handle(request:any,vueThis:Vue,...arg:any):boolean{if(this.nextHandler){return this.nextHandler.handle(request,vueThis,arg);}return false;}
}


3.子类继承抽象类

class RequestHandle200 extends AbstractRequestHandle{handle(requset:any,vueThis:Vue,...arg:any){if(requset &＃61;&＃61;&＃61; 200){//数据处理操作vueThis.$message.success(&＃39;操作成功!&＃39;);vueThis.$set(vueThis, &＃39;newGroupVis&＃39;, false);vueThis.$set(vueThis, &＃39;groupName&＃39;, &＃39;&＃39;);getGroupList({token: arg[0].token,keyword: &＃39;&＃39;,pageNo: arg[0].currentPage,pageSize: arg[0].pageSize}).then((res:any) &＃61;> {if(res.code&＃61;&＃61;&＃61;200){vueThis.$set(vueThis,&＃39;spinningTable&＃39;,false);vueThis.$store.dispatch(&＃39;groupModule/editContent&＃39;,res.data)}}).catch(() &＃61;> {vueThis.$set(vueThis,&＃39;spinningTable&＃39;,false);})return true; }return super.handle(requset,vueThis,arg); }
}class RequestHandle409 extends AbstractRequestHandle{handle(requset:any,vueThis:Vue,...arg:any){if(requset &＃61;&＃61;&＃61; 409){//数据处理操作vueThis.$message.error(&＃39;分组已存在!&＃39;);vueThis.$set(vueThis,&＃39;spinningTable&＃39;,false);return true; }return super.handle(requset,vueThis,arg); }
}class RequestHandleOther extends AbstractRequestHandle{handle(requset:any,vueThis:Vue,...arg:any){if(requset !&＃61;&＃61; 200){//数据处理操作vueThis.$message.error(&＃39;操作失败!&＃39;);vueThis.$set(vueThis,&＃39;spinningTable&＃39;,false);return true; }return super.handle(requset,vueThis,arg); }
}


4. 实例化&＃xff0c;形成链条&＃xff0c;并导出

注意&＃xff1a;形成链条的先后顺序&＃xff0c;它会影响处理的先后顺序


const request200 &＃61;new RequestHandle200();
const requestOther &＃61; new RequestHandleOther();
const request409 &＃61; new RequestHandle409();request200.setNext(request409).setNext(requestOther);export default request200;


5. vue页面使用

import request200 from &＃39;./fun/cor&＃39;


和图1.1对象发现&＃xff0c;现在的then中只有一行代码&＃xff0c;并且不同的状态有不同类进行处理&＃xff0c;降低了耦合和提高代码可维护性。效果如下图

三、整体代码

import Vue from &＃39;vue&＃39;
import { getGroupList } from &＃39;../../../../api/groupList&＃39;;
interface RequestHandle{setNext(handle:RequestHandle):RequestHandle;handle(request:any,vueThis:Vue,arg:any):boolean;
}
abstract class AbstractRequestHandle implements RequestHandle{private nextHandler:RequestHandle;setNext(handle:RequestHandle):RequestHandle{this.nextHandler&＃61;handle;return handle;}handle(request:any,vueThis:Vue,...arg:any):boolean{if(this.nextHandler){return this.nextHandler.handle(request,vueThis,arg);}return false;}
}class RequestHandle200 extends AbstractRequestHandle{handle(requset:any,vueThis:Vue,...arg:any){if(requset &＃61;&＃61;&＃61; 200){vueThis.$message.success(&＃39;操作成功!&＃39;);vueThis.$set(vueThis, &＃39;newGroupVis&＃39;, false);vueThis.$set(vueThis, &＃39;groupName&＃39;, &＃39;&＃39;);getGroupList({token: arg[0].token,keyword: &＃39;&＃39;,pageNo: arg[0].currentPage,pageSize: arg[0].pageSize}).then((res:any) &＃61;> {if(res.code&＃61;&＃61;&＃61;200){vueThis.$set(vueThis,&＃39;spinningTable&＃39;,false);vueThis.$store.dispatch(&＃39;groupModule/editContent&＃39;,res.data)}}).catch(() &＃61;> {vueThis.$set(vueThis,&＃39;spinningTable&＃39;,false);})return true; }return super.handle(requset,vueThis,arg); }
}class RequestHandle409 extends AbstractRequestHandle{handle(requset:any,vueThis:Vue,...arg:any){if(requset &＃61;&＃61;&＃61; 409){vueThis.$message.error(&＃39;分组已存在!&＃39;);vueThis.$set(vueThis,&＃39;spinningTable&＃39;,false);return true; }return super.handle(requset,vueThis,arg); }
}class RequestHandleOther extends AbstractRequestHandle{handle(requset:any,vueThis:Vue,...arg:any){if(requset !&＃61;&＃61; 200){vueThis.$message.error(&＃39;操作失败!&＃39;);vueThis.$set(vueThis,&＃39;spinningTable&＃39;,false);return true; }return super.handle(requset,vueThis,arg); }
}const request200 &＃61;new RequestHandle200();
const requestOther &＃61; new RequestHandleOther();
const request409 &＃61; new RequestHandle409();request200.setNext(request409).setNext(requestOther);export default request200;


注:你也可以把接口和抽象类独立成一个文件&＃xff08;A文件&＃xff09;&＃xff0c;继承抽象类的子类独立成另一个文件&＃xff08;B文件&＃xff09;&＃xff0c;这里把A文件放在全局&＃xff0c;以后在开发中那个页面需要用到就可以继承抽象类&＃xff0c;生成处理单独页面的函数