在Angular中使用NgRx处理.NET API 404响应的异常问题

我通过分发Redux Action实现用户登录功能，当输入错误凭证时，.NET后端会返回NotFound()（404状态码）。我尝试在Angular代码中用try/catch块处理该响应，但控制台还是会显示404错误，怎么才能避免这个HTTP错误被记录？

Angular 代码 #

try {
  this.store.dispatch(loginAction({ request }))
} catch (error) {
  console.log("Error: " + error)
}

.NET 后端代码 #

[HttpPost("login")]
public async Task<ActionResult<ServiceResponse<String>>> Login(UserLoginDto request)
{
    var response = await _authRepo.Login(request.Username, request.Password);

    // 检查响应
    if (!response.Success) return NotFound(response);
    return Ok(response);
}

控制台错误截图 #

首先要明确：你用的try/catch抓不到这个错误，因为store.dispatch是异步操作，而且登录请求的HTTP错误是在NgRx Effects（或HTTP服务）里抛出的，不会直接冒泡到当前的try/catch块中。

1. 优先修正后端状态码（符合HTTP规范） #

错误凭证不应该返回404——404表示资源不存在，而登录失败属于客户端凭证无效，应该用401 Unauthorized（未授权）更合理。修改后端代码：

if (!response.Success) return Unauthorized(response);

2. 用HTTP拦截器过滤指定错误 #

如果一定要保留404状态码，或者需要统一处理全局HTTP错误，可以创建一个拦截器捕获并过滤掉不想在控制台显示的错误：

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpErrorResponse } from '@angular/common/http';
import { Observable, catchError } from 'rxjs';

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    return next.handle(request).pipe(
      catchError((error: HttpErrorResponse) => {
        // 过滤登录接口的404错误
        if (request.url.includes('/login') && error.status === 404) {
          // 这里可以添加自定义错误处理逻辑，比如提示用户凭证错误
          return new Observable<HttpEvent<unknown>>(); // 不抛出错误，控制台就不会记录
        }
        // 其他错误正常抛出
        throw error;
      })
    );
  }
}

然后在app.module.ts中注册拦截器：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { ErrorInterceptor } from './error.interceptor';

@NgModule({
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true }
  ]
})
export class AppModule { }

3. 在NgRx Effects中直接捕获错误 #

如果登录请求是在NgRx Effects里发起的，直接在Effects里处理错误，不让错误冒泡到全局：

import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { of } from 'rxjs';
import { catchError, map, mergeMap } from 'rxjs/operators';
import { AuthService } from './auth.service';
import { loginAction, loginSuccessAction, loginFailureAction } from './auth.actions';

@Injectable()
export class AuthEffects {
  login$ = createEffect(() =>
    this.actions$.pipe(
      ofType(loginAction),
      mergeMap(({ request }) =>
        this.authService.login(request).pipe(
          map(response => loginSuccessAction({ response })),
          catchError(error => {
            // 自定义错误处理，比如分发失败Action
            console.log('登录失败:', error);
            return of(loginFailureAction({ error })); // 返回失败Action，不抛出错误
          })
        )
      )
    )
  );

  constructor(private actions$: Actions, private authService: AuthService) {}
}

内容的提问来源于stack exchange，提问作者AntoBoy