持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第21天，点击查看活动详情
前言
乍一看这个设计模式感觉贼拉高端，实际上我学完之后发现也就那个样子。在我们日常开发过程中，实际上已经接触过这种设计模式了，只是不知道那种操作就是设计模式而已。
相信我们一起来看完之后，大家可能有一种原来如此的感觉。
名词解释
职责链模式：解决请求的发送者与请求的接受者之间的耦合，通过职责链上的多个对象对分解请求流程，实现请求在多个对象之间的传递，知道最后一个对象完成请求的处理。
见猫画虎
看完名词解释之后，大家要小心掉入知识误区。这里所说的请求并不是我们日常开发过程中，与后端服务器之间的通讯的那种http请求。
另外就是，如同设计模式的名称一样，职责链模式创建的就是一种链表结构，由第一个节点开始处理，处理完成之后转交给下一个节点，直到处理完成为止。
说到这里不知道大家有没有感觉到一丝丝的熟悉，我们现在请求经常使用到的axios的拦截器就是这个样子的。
身临其境
我们就以axios请求的拦截器为例来进行展开说明一下下。
开启loading
通常我们进行请求的时候，会显示loading菊花图已告诉用户我们正在请求中。为了避免重复的代码编写，我们一般放到请求拦截器里面进行统一处理。
instance.interceptors.request.use(config => {
if (needLoading) {
showLoading();
}
return config;
}, err => {});
请求头包装
对于一些需要登录访问的网站，我们进行请求的时候需要使用携带token。这种操作我们通常是放在请求发出之前处理。先从本地缓存中获取，然后添加到请求头中。
instance.interceptors.request.use(config => {
const token = localStorage.getItem('token');
if (token) {
config.headers['token'] = token;
}
}, err => {});
响应结果处理
当我们接收到请求的结果时候，我们需要先拦截一手。过滤掉所有的异常请求或者是特殊情况的请求之后，将请求成功的请求抛出。
axios_instance.interceptors.response.use(res => {
// 成功响应的拦截
if (res.code === 200) {
return Promise.resolve(res.data);
}
// 异常情况处理
...
}, err =>{});
请求loading关闭
前面请求刚开始的时候我们开启了请求，到这里我们就需要将请求关闭掉，形成完整闭合。
axios_instance.interceptors.response.use(res => {
if (needLoading) {
closeLoading();
}
}, err =>{});
总结
我们通过一个日常中经常使用到的第三方插件——axios进行了展开说明，相信大家对职责链模式有了一定的了解了。这里我们对于责任链模式的好处在进行总结一下。
责任链模式将一条链路上的不同需要按照操作顺序进行分解，然后每个节点只执行对应的需求处理，这样我们保证每个节点只需要负责单一的功能即可，一个节点处理完成传递给下一个节点，直到处理完成。
好了，有关责任链模式的内容我们就聊到这里了，欢迎大家在下方进行留言交流。
