无法实现用于捕获 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 方法时。如何修改方法装饰器来实现这个结果？

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 关键字而不是箭头函数来定义覆盖，以便能够使用 class 上下文的 this。

无法实现用于捕获 Angular 中的 http 错误的方法装饰器？

Not able to implement method decorators for catching http errors in Angular?

typescript

angular2-decorators

angular