Angular 4.3 HttpClient：捕获webapi错误响应正文

问题描述：

我正尝试使用新的HttpClientModule来处理从我的.NET Core WebApi从Angular 4.3服务返回的错误。Angular 4.3 HttpClient：捕获webapi错误响应正文

我正在做的http请求如下：

postUser(model: IPostUser): Observable<IUser> { 
    return this.http.post<IUser>(this.originUrl + '/api/registry', model) 
     .catch((reason: any) => this.handleError(reason)); 
}

的handleError方法是：

private handleError(error: HttpErrorResponse | any): ErrorObservable { 
    // in a real world app, we might use a remote logging infrastructure 
    let errStatus: string; 
    let errMsg: string; 
    if (error instanceof HttpErrorResponse) { 
     try { 
      const body: any = error.error || error; 
      const err: string = body.message || JSON.stringify(body); 
      errStatus = `${error.status} - ${error.statusText || ''}`; 
      errMsg = `${err}`; 

      if (error.status === 0) { 
       errMsg = 'Si é verificato un errore. Si prega di riprovare più tardi.'; 
      } else if (error.status === HttpStatusCodes.UNAUTHORIZED || error.status === HttpStatusCodes.FORBIDDEN) { 
       errMsg = 'Non hai effettuato l\'accesso.'; 
      } 
     } catch (ex) { 
      errMsg = 'Si é verificato un errore. Si prega di riprovare più tardi.'; 
     } 
    } else { 
     errMsg = error.message ? error.message : error.toString(); 
    } 
    console.error(errStatus + ': ' + errMsg); 
    this.toastrService.error(errMsg, 'Errore'); 
    return Observable.throw(errMsg); 
}

而的WebAPI控制器动作进行以下的安全检查：

var user = await _userManager.FindByIdAsync(model.Id); 
if (user == null) 
    return NotFound("Utente non trovato."); 

if ((await _userManager.FindByNameAsync(model.UserName)) != null) 
    return BadRequest("Esite già un utente con questo Username."); 
else if ((await _userManager.FindByEmailAsync(model.Email)) != null) 
    return BadRequest("Esite già un utente con questa Email."); 
else if ((await _userManager.Users.SingleOrDefaultAsync(u => u.TaxCode == model.TaxCode)) != null) 
    return BadRequest("Esite già un utente con questo Codice Fiscale.");

因此，根据用户尝试发布到服务器的情况，服务器会抛出一个NotFound o r BadRequest使用包含消息的对象的主体来进行呼叫。

一个坏的调用到的WebAPI行动造成此错误：

undefined: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.

我试图使用HttpInterceptor捕获错误响应正文：

@Injectable() 
export class ErrorInterceptor implements HttpInterceptor { 

constructor(private router: Router) { } 

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

    return next.handle(req).do((event: HttpEvent<any>) => { 
     if (event instanceof HttpResponse) { 
      // do stuff with response if you want 
     } 
    }).catch((error: any) => { 
     if (error instanceof HttpErrorResponse) { 
      let x = error; 
      if (error.status === HttpStatusCodes.BAD_REQUEST || error.status === HttpStatusCodes.NOT_FOUND) { 
       return Observable.throw(error); 
      } 
     } 
    }) 
}

}

但是，对于拦截器，在调用post之后错误仍然与catch方法相同在Angular服务中调用上面显示的TypeError异常而不是我的自定义错误对象。

任何解决方案？如何从服务器捕获BadRequest/NotFound错误响应并正确获取错误响应正文？

谢谢大家提前！

答

我发现了这个问题。我有另一个拦截器，它只返回Observable.throw(..)的401和403错误响应。使它始终返回异常解决了问题。

Angular 4.3 HttpClient：捕获webapi错误响应正文

相关推荐