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錯誤響應並正確獲取錯誤響應正文？

謝謝大家提前！

來源

2017-08-04 Androidian

我發現了這個問題。我有另一個攔截器，它只返回Observable.throw(..)的401和403錯誤響應。使它始終返回異常解決了問題。

來源

2017-08-04 15:20:13 Androidian

Angular 4.3 HttpClient：捕獲webapi錯誤響應正文

回答

相關問題