The Chain of Responsibility (COR) is a pattern that allows some request to be sent, received, and handled by multiple objects. These objects (which are just functions) are not dependent on the implementation details of the previous nor the next request and can decide what to do when it runs its execution. They can also either abort the whole chain or decide to let the request continue on to the next object (or function) in the chain.

没有用责任链时

const httpErrorHandler = (error) => {
   const errorStatus = error.response.status;
   if (errorStatus === 400) {
     console.log('安安，你是不是給了我奇怪的東西？');
   }
   if (errorStatus === 401) {
     console.log('先登入行不？');
   }
   if (errorStatus === 403) {
     console.log('想偷幹壞事？');
   }
   if (errorStatus === 404) {
     console.log('這裡什麼都沒有（雙手一攤');
   }
};

使用责任链

当前的执行者
下一个执行者

判断当前执行者执行后是否需要交给下一个接收者

class Chain {
constructor(handler) {
 this.handler = handler;
 this.successor = null;
}
setSuccessor(successor) {
 this.successor = successor;
 return this;
}
passRequest(...args) {
 const result = this.handler(...args);
 if (result === 'next') {
   return this.successor && this.successor.passRequest(...args);
 }
 return result;
}
}

```typescript const response400 = (error) => { if (error.response.status !== 400) return ‘next’; console.log(‘安安，你是不是給了我奇怪的東西？’); };

const response401 = (error) => { if (error.response.status !== 401) return ‘next’; console.log(‘先登入行不？’); };

const response403 = (error) => { if (error.response.status !== 403) return ‘next’;; console.log(‘想偷幹壞事？’); };

const response404 = (error) => { if (error.response.status !== 404) return ‘next’;; console.log(‘這裡什麼都沒有（雙手一攤’); };

const httpErrorHandler = (error) => { const chainRequest400 = new Chain(response400); const chainRequest401 = new Chain(response401); const chainRequest403 = new Chain(response403); const chainRequest404 = new Chain(response404);

chainRequest400.setSuccessor(chainRequest401); chainRequest401.setSuccessor(chainRequest403); chainRequest403.setSuccessor(chainRequest404);

chainRequest400.passRequest(error); };

ts 实现
```javascript
/**
 * The Handler interface declares a method for building the chain of handlers.
 * It also declares a method for executing a request.
 */
interface Handler {
    setNext(handler: Handler): Handler;
    handle(request: string): string;
}
/**
 * The default chaining behavior can be implemented inside a base handler class.
 */
abstract class AbstractHandler implements Handler
{
    private nextHandler: Handler;
    public setNext(handler: Handler): Handler {
        this.nextHandler = handler;
        // Returning a handler from here will let us link handlers in a
        // convenient way like this:
        // monkey.setNext(squirrel).setNext(dog);
        return handler;
    }
    public handle(request: string): string {
        if (this.nextHandler) {
            return this.nextHandler.handle(request);
        }
        return null;
    }
}
/**
 * All Concrete Handlers either handle a request or pass it to the next handler
 * in the chain.
 */
class MonkeyHandler extends AbstractHandler {
    public handle(request: string): string {
        if (request === 'Banana') {
            return `Monkey: I'll eat the ${request}.`;
        }
        return super.handle(request);
    }
}
class SquirrelHandler extends AbstractHandler {
    public handle(request: string): string {
        if (request === 'Nut') {
            return `Squirrel: I'll eat the ${request}.`;
        }
        return super.handle(request);
    }
}
class DogHandler extends AbstractHandler {
    public handle(request: string): string {
        if (request === 'MeatBall') {
            return `Dog: I'll eat the ${request}.`;
        }
        return super.handle(request);
    }
}
/**
 * The client code is usually suited to work with a single handler. In most
 * cases, it is not even aware that the handler is part of a chain.
 */
function clientCode(handler: Handler) {
    const foods = ['Nut', 'Banana', 'Cup of coffee'];
    for (const food of foods) {
        console.log(`Client: Who wants a ${food}?`);
        const result = handler.handle(food);
        if (result) {
            console.log(`  ${result}`);
        } else {
            console.log(`  ${food} was left untouched.`);
        }
    }
}
/**
 * The other part of the client code constructs the actual chain.
 */
const monkey = new MonkeyHandler();
const squirrel = new SquirrelHandler();
const dog = new DogHandler();
monkey.setNext(squirrel).setNext(dog);
/**
 * The client should be able to send a request to any handler, not just the
 * first one in the chain.
 */
console.log('Chain: Monkey > Squirrel > Dog\n');
clientCode(monkey);
console.log('');
console.log('Subchain: Squirrel > Dog\n');
clientCode(squirrel);

使用场景

过滤器
拦截器
参考资料

winter is coming

【2021.06】责任链模式

使用场景

参考资料