Question

我尝试使用新的HttpClientModule来处理来自Angular 4.3服务的.NET Core 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或BadRequest respose，其主体是包含消息的对象。

对该WebApi操作的错误调用会导致此错误：

undefined：您提供了未定义的＆＃39;预期流的地方。您可以提供Observable，Promise，Array或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);
            }
        }
    })
}

}

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

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

提前谢谢大家！

Answer 1

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

Angular 4.3 HttpClient：捕获webapi错误响应体

1 个答案: