使用 Angular 7 处理 HTTPErrorResponse 的最佳方法

Question

So the backend Server returns different status code and HttpErrorResponse when there are erroneous requests from the front end; I have realised the best way to manage this is using interceptors in an Ionic 4/Angular 7 setup.

I have tried interceptors a couple of times and I am stuck with different issues. I am now following the steps in this link

My services are defined like this :

     saveLocationNew(request: AddLocationRequest, entityId:string, userId:string): Observable<AddLocationResponse> {

          return this.httpClient.post<AddLocationResponse>(this.addLocationUrl, request ,  {headers:Constants.getHeaders(userId,entityId)})
       }

With the interceptors it is now :

    saveLocationNew(request: AddLocationRequest, entityId:string, userId:string): Observable<AddLocationResponse> {

      return this.httpClient.post<AddLocationResponse>(this.addLocationUrl, request ,  {headers:Constants.getHeaders(userId,entityId)})
      .pipe(
    tap(_ => console.log('creating a new location')),
    catchError(this.handleError('new Location',[]))
  );  
}

The issue being my existing service returns a response of type of AddLocationResponse; but in case of error how do I define the type of the return object and ionic serve also throws this error :

    ERROR in src/app/services/location.service.ts(42,11): error TS2322: Type 'Observable<any[] | AddLocationResponse>' is not assignable to type 'Observable<AddLocationResponse>'.
[ng]   Type 'any[] | AddLocationResponse' is not assignable to type 'AddLocationResponse'.
[ng]     Type 'any[]' is not assignable to type 'AddLocationResponse'.
[ng]       Property 'name' is missing in type 'any[]'.
[ng] src/app/services/location.service.ts(74,49): error TS2339: Property 'message' does not exist on type 'T'.

Any idea what would be the best way to implement interceptors so that the component(*.page.ts files) won't need any change .

My interceptor looks like this :

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

  const token = localStorage.getItem('token');

  if (token) {
    request = request.clone({
      setHeaders: {
        'Authorization': token
      }
    });
  }

  if (!request.headers.has('Content-Type')) {
    request = request.clone({
      setHeaders: {
        'content-type': 'application/json'
      }
    });
  }

  request = request.clone({
    headers: request.headers.set('Accept', 'application/json')
  });

  return next.handle(request).pipe(
    map((event: HttpEvent<any>) => {
      if (event instanceof HttpResponse) {
        console.log('event--->>>', event);
      }
      return event;
    }),
    catchError((error: HttpErrorResponse) => {
      if (error.status === 401) {
        if (error.error.success === false) {
          this.presentToast('Login failed');
        } else {
            console.log(' route this to right place');
        //   this.router.navigate(['auth/login']);
        }
      }
          if (error.status === 500) {
        if (error.error.success === false) {
          this.presentToast('Something went wrong, Please contact Administrator');
        } else {
            console.log(' route this to right place');
        //   this.router.navigate(['auth/login']);
        }
      }
      //431

       if (error.status === 431) {
        if (error.error.success === false) {
          this.presentToast('Something went wrong with the HttpRequest, Please contact Administrator');
        } else {
            console.log(' route this to right place');
        //   this.router.navigate(['auth/login']);
        }
      }

      // add all the other error codes here 
      return throwError(error);
    }));
}

I am not sure what else needs to be added/modified so that the HttpErrorResponse will be intercepted.

Answer 1

you can use it like this

    saveLocationNew(request: AddLocationRequest, entityId:string, userId:string): Observable<AddLocationResponse> {

      return this.httpClient.post<AddLocationResponse>(this.addLocationUrl, request ,  {headers:Constants.getHeaders(userId,entityId)})
      .pipe(
    tap(_ => console.log('creating a new location')),
    catchError(this.handleError<string>('stats')))
  )
}

now create function named handle error to handle all error requests like this

private handleError<T>(operation = 'operation', result?: T) {
    return (error: any): Observable<T> => {
      console.error(error);   
      console.log(`${operation} failed: ${error.message}`);
      if(error.error.message == "Token is invalid!"){
        localStorage.removeItem('token');
        this.router.navigateByUrl('/login');
      }
      else{
        return throwError(error)
      }
      return of(result as T);
    };
  }

you need to throw that error if you want to deal with that error in your component. hope this will help you.

Answer 2

我从源代码中删除了 HttpClientModule 的多个定义，并且能够让一切正常工作。