ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2021-03-16 13:57:36  阅读:189  来源: 互联网

标签:http 职责 vueThis 处理函数 json successor any 请求


当我们处理比较多的请求状态时,如果按照平时的写法会在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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有