获取 TypeError：在发送 ajax 请求（Angular 12）时无法读取未定义的属性（读取“管道”）

Question

I am getting below error while sending ajax request,

ERROR TypeError: Cannot read properties of undefined (reading 'pipe')
at AuthTokenInterceptor.intercept (auth-token.interceptor.ts:43)

auth-token.interceptor.ts

intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> { 
    console.log('request', request); // here i am getting request data 

    // if (accessToken) {
    //   request = this.getRequestWithToken(request, accessToken);
    // }
    const handlers = next.handle(request); // but here i am getting undefined
    console.log('next.handle(request)', handlers); --> undefined

    return handlers.pipe(
      catchError((responseError) => {
        console.log('authToken responseError', responseError);
        if (responseError instanceof HttpErrorResponse) {
        } else {
          return throwError(responseError);
        }
      })
    );
  }

I have data in reuest but getting next.handle(request) as undefined ;

Any help would be appreciated. Thanks!

Answer 1

next.handle() returns an Observable. Angular:

An interceptor may transform the response event stream as well, by 
applying additional RxJS operators on the stream returned by 
next.handle().

It's undefined because it is async. Use a tap operator to log it.

 return handlers.pipe(
  tap(res => console.log(res)),
  catchError((responseError) => {
    console.log('authToken responseError', responseError);
    if (responseError instanceof HttpErrorResponse) {
    } else {
      return throwError(responseError);
    }
  })