Question

我目前正在开发一个HTTP拦截器，该拦截器一直工作到昨天。

它定义了静态方法，并且其中一个不想被识别。

控制台说：

my.component.ts：162 PUT请求类型错误：HttpInterceptorService_1.httpInterceptorService.createHttpErrorMessage不是函数

at TapSubscriber._tapNext (http-interceptor.service.ts:113)
at TapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._next (tap.js:45)
at TapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
at TakeSubscriber.push../node_modules/rxjs/_esm5/internal/operators/take.js.TakeSubscriber._next (take.js:40)
at TakeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
at Notification.push../node_modules/rxjs/_esm5/internal/Notification.js.Notification.observe (Notification.js:15)
at AsyncAction.push../node_modules/rxjs/_esm5/internal/operators/delay.js.DelaySubscriber.dispatch [as work] (delay.js:42)
at AsyncAction.push../node_modules/rxjs/_esm5/internal/scheduler/AsyncAction.js.AsyncAction._execute (AsyncAction.js:63)
at AsyncAction.push../node_modules/rxjs/_esm5/internal/scheduler/AsyncAction.js.AsyncAction.execute (AsyncAction.js:51)
at AsyncScheduler.push../node_modules/rxjs/_esm5/internal/scheduler/AsyncScheduler.js.AsyncScheduler.flush (AsyncScheduler.js:43)

我的拦截器看起来像这样（我已将其简化为对该错误感兴趣的部分）：

// My imports

@Injectable({
  providedIn: 'root'
})
export class HttpInterceptorService implements HttpInterceptor {
  // Other static stuff and below my httpInterceptorService
  static httpInterceptorService: HttpInterceptorService;

  constructor(
    httpInterceptorService: HttpInterceptorService,
  ) {
    HttpInterceptorService.httpInterceptorService = httpInterceptorService;;
  }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const headers = new HttpHeaders({
      // Some headers
    });

    const clone = req.clone({
      // ..
    });

    return next.handle(clone).pipe(
      // ..
    );
  }

  createHttpErrorMessage(error: HttpErrorResponse, statusText: string) {
    const msg: string = error.status + ' ' + error.statusText + ' - ' + statusText;
    switch (error.status) {
      case 404:
        this.showError('Error ID: ' + this.id, msg);
        break;
      default:
        break;
    }
    console.error(
      // Some error messages
    );
  }

  handleHttpError(error: HttpErrorResponse) {
    if (my condition) {
      // some logic
    } else {
      return throwError(error).pipe(
        retryWhen(errors => errors.pipe(
          delay(1000),
          take(1),
          tap(() => {
            switch (error.status) {
              case 404: // This method is not recognized anymore.. 
                HttpInterceptorService.httpInterceptorService.createHttpErrorMessage(
                  error, HttpInterceptorService.otherService.doSomething());
                break;
              default:
                console.error(error);
                break;
              }
            }),
          ),
        )
      );
    }
  }
}

正如我所说，拦截器到目前为止一直没有任何问题，直到昨天出现此错误为止。

我在做什么错了？

Answer 1

您可以进行以下更改之一，以解决编译问题。

使用
调用
```
this.createHttpErrorMessage(...)
```

OR

使方法静态并使用

调用

HttpInterceptorService.createHttpErrorMessage(...)

打字稿：在类内部调用静态方法（Angular HttpInterceptor）

1 个答案: