使用职责链模式处理http请求返回的状态信息

当我们处理比较多的请求状态时，如果按照平时的写法会在then中写大量的if判断，可读性非常的差。并且也违背了函数的单一职责原则。所以本篇博客以实际项目为主使用职责链模式，处理不同状态的请求。下图为在then中使用职责链模式调用的处理函数。可以发现它把请求委托到了别的地方处理了。对于项目以后的修改就不需要关注本函数内的代码。可见使用模式设计可以轻松接触耦合。话不多说，来看一下如何设计职责链模式吧。

一、职责链模式

/**
 * @description 用于形成链条的class
 */
class ResponseChain {
  protected successor:any
  constructor(private fn:any){}
  after(successor:any){
    return this.successor=successor;
  }
  request(obj:any){
    const ret=this.fn.call(this,obj);
    if(ret==='next'){
      return this.successor&&this.successor.request.call(this.successor,obj);
    }
    return ret;
  }
}

ResponseChain 类用于形成处理函数链条。其中this.successor变量用于存储处理请求中的一个节点。如下图

request函数用于调用并执行当前函数，如果节点不能处理该请求，函数会返回next，然后递归下一个节点处理。直到能找到能处理的为止。如果没有找到，就return ret 退出。

二、请求处理函数

定义请求处理函数
200处理函数

/**
 * @description 处理200的请求
 * @param {json, vueThis} 请求回来的信息和vue的this
 * @returns {string}
 */
function requset200({json, vueThis}:any={}) {
  if (json.code === 200) {
    (vueThis as any).$notify({
      message: '修改成功',
      type: 'success'
    });
    vueThis.closePop('disable');
    location.href = '/home/account';
  } else {
    return 'next';
  }
}

405处理函数

/**
 * @description 处理405的请求
 * @param {json, vueThis} 请求回来的信息和vue的this
 * @returns {string}
 */
function requset405({json, vueThis}:any={}) {
  if (json.code === 405) {
    vueThis.errorMsg = json.message;
  } else {
    return 'next';
  }
}

407处理函数

/**
 * @description 处理407的请求
 * @param {json, vueThis} 请求回来的信息和vue的this
 * @returns {string}
 */
function requset407({json, vueThis}:any={}) {
  if (json.code === 407) {
    vueThis.$set(vueThis, 'errorMsg1', json.message);
  } else {
    return 'next';
  }
}

其他请求状态函数

/**
 * @description 处理其他的请求
 * @param {json, vueThis} 请求回来的信息和vue的this
 * @returns {string}
 */
function requsetOthers(obj:any) {
  (obj.vueThis as any).$notify({
    message: '登录失败',
    type: 'error'
  });
}

三、把请求处理函数穿成一个链条,并导出。

export const requsetHandler=new ResponseChain(requset200);
const req405 =new ResponseChain(requset405);
const req407=new ResponseChain(requset407);
const reqOthers =new ResponseChain(requsetOthers);
requsetHandler.after(req405);
req405.after(req407);
req407.after(reqOthers);

最后在函数中使用即可

标签：http,职责,vueThis,处理函数,json,successor,any,请求
来源： https://blog.csdn.net/qq_42683219/article/details/114875119