Angular6 HttpClient catchError 不工作

Question

CatchError 在 401 响应中被完全忽略。

我有处理 oauth2 身份验证的 httpInterceptor。

相关代码是:

import { filter, take, switchMap, map, catchError } from 'rxjs/operators';
//ommited
if (authService.hasRefreshToken()) {
    return authService.doRefreshToken().pipe(switchMap(tokenResponse => {
            const accessToken = tokenResponse['access_token'];
            this.tokenSubject.next(accessToken);
            return <Observable<HttpEvent<any>>> next.handle(this.addToken(req, accessToken));
        }), catchError((err: any, caught: any) => {
            console.log(err)
            return Observable.throw(err);
        })
    )
}

AuthService类:

export class AuthService {
    doRefreshToken() {
        //ommited
        return this.httpClient.post(environment.baseUrl + this.tokenEndpoint, null, requestOptions).pipe(
            map(tokenResponse => {
                this.saveToken(tokenResponse);
                return tokenResponse;
            }),
            catchError((err: any, caught: Observable<Object>) => {
                //refreshing token failed (refrech token invalid or expired) redirect to login and wipe everything
                this.logout();
                return Observable.throw(err);
            }));
    }
}

200 响应一切正常，但 401 错误被完全忽略。我是否以错误的方式使用了这个新的 catchError？

附言这段代码在普通的旧 catch 上工作得很好，但是现在当我迁移到 angular6 管道和 catchError 时，同样的东西就不起作用了。

编辑:

catchError 上的断点显示

"SyntaxError: Unexpected end of input at AuthService.push../src/app/common/auth/auth.service.ts.AuthService.doRefreshToken

服务器的实际响应是:

{
 "error" : "invalid_token",
 "error_description" : "Refresh token expired"
}

标题:

 Request Method: POST
 Status Code: 401 

Answer 1

我遇到了 catchError 函数被完全忽略的相同问题。由于@SeaBiscuit 使用的这个简单明了的代码如官方 Angular documentation 中所述没有用，我放弃了处理错误响应的方法，而是查看了 HttpInterceptors。这奏效了!

我受到了 Luuk Gruijs 在他的文章 Global HTTP error catching in Angular 4.3+ 中的指导的启发。将下面显示的 ErrorInterceptor 添加到我的代码中。

不可否认，下面的拦截器可能并不完美，但拦截器中处理错误最重要的部分归结为:

next.handle(request).pipe(tap(
  (event: HttpEvent<any>) => { },
  (error: any) => {
    // Handle errors here!
  }
))

---

下面是我实现的更详细的一瞥:

export class ErrorInterceptor implements HttpInterceptor {
  constructor() { }

  intercept (request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (request.method !== 'GET') {
      return next.handle(request);
    }

    const subject = new AsyncSubject<HttpEvent<any>>();

    next.handle(request)
    .pipe(
      tap((event: HttpEvent<any>) => {
        // Let HttpResponses pass through interceptor without interaction
        if (event instanceof HttpResponse) {
          subject.next(event);
          subject.complete();
        }
      }, (error: any) => {
        if (error instanceof HttpErrorResponse) {
          const errorEvent = new HttpResponse({
            body: {
              message: error.error.message,
              status: error.status,
              statusText: error.statusText
            }
          });

          subject.next(errorEvent);
          subject.complete();
        }
      })
    ).subscribe();

    return subject;
  }
}

我还修改了我的服务以接受手动创建的响应主体:

return this.http.get<MyObjI | ErrorI>(url, {params});

... ErrorI 是:

export interface ErrorI {
  message: string;
  status: number;
  statusText: string;
}

希望在拦截器中处理错误也能帮到您!