无法在Angular中实现捕捉http错误的方法装饰器

Question

实际上，我想使用自定义装饰器捕获所有http请求的错误。

我的实际代码如下：

createRecord(data: data) {

return this.httpClient.post(`${this.apiURL}/record/`, data);
}

我想把这些函数转换成这样的东西：

createRecord(data: data) {

return this.httpClient.post(`${this.apiURL}/record/`, data)
.pipe(tap((data)=>console.log(data)),catchError(handleError)));
}

我知道使用http拦截器是可能的，但我尝试使用自定义方法装饰器。我的装饰师是这样的：

export function CatchHttpError() : MethodDecorator {
return function ( target : any, propertyKey : string, descriptor : PropertyDescriptor ) {
const original = descriptor.value;
descriptor.value = original()
.pipe(
tap((data)=>console.log('tap entered: data = ',data)),
catchError(handleError)
);
return descriptor;
};
}

然后我把功能装饰成这样：

@CatchHttpError()
createRecord(data: data) {

return this.httpClient.post(`${this.apiURL}/record/`, data);
}

但这里的问题是，只有当我初始化这个特定的服务时，它才会尝试执行函数，而不是当我实际调用createRecord方法时。如何修改方法decorator以获得此结果？

Answer 1

如果你想让装饰器改变它所应用的方法的行为，你需要从装饰器中重写原始方法：

export function CatchHttpError() : MethodDecorator {
return function (target : any, propertyKey : string, descriptor : PropertyDescriptor ) {
const original = descriptor.value;
// override the method
descriptor.value = function(...args: any[]) {
// Calling the original method
const originalResults = original.apply(this, args);
return originalReults.pipe(
tap((data) => console.log('tap entered: data = ',data)),
catchError(handleError)
);
}
}

请注意，重要的是使用function关键字而不是箭头函数来定义覆盖，以便能够使用类上下文的this。