Angular HttpClient 服务仅返回状态码为 200 的响应

Question

我有一个调用 http 客户端服务的登录组件，它向我的服务器发送请求以尝试登录。如果我输入的凭据有效，一切正常，但每当我输入错误的凭据时，我的服务显然不会 return 任何东西。

这是点击登录时调用的方法：

  submit(){
    this.auth.tryLogin(this.form.getRawValue())
    .subscribe(res => {
      console.log(res);
      if(res.status == 200){
        this.router.navigate(['/'])
      }
      else{
        alert(res.status)
      }
    })
  }

这是服务的代码

  tryLogin(data : any) : Observable<HttpResponse<any>> {
    return this.http.post<any>(environment.server + environment.routes.authRoutes.login, data, {
      withCredentials: true,
      observe: 'response'
    })
  }

每当我输入正确的凭据时，一切正常，响应会记录到控制台，我会被重定向到我的主页：

但是当我输入错误时 password/username 它不会提示状态代码，我也不知道为什么

我是不是用错了http客户端，它在响应中收到错误代码时会抛出异常吗？有什么我想念的吗？

Answer 1

您的实施是正确的，但它仅适用于成功案例。

如果你看一下 Observable 标志，你可以看到它有一些参数：

const observer = {
  next: x => console.log('Observer got a next value: ' + x),
  error: err => console.error('Observer got an error: ' + err),
  complete: () => console.log('Observer got a complete notification'),
};

所以在你的情况下你必须：

submit(){
  this.auth.tryLogin(this.form.getRawValue())
  .subscribe(
    res => {
      console.log(res);
      if (res.status == 200) {
        this.router.navigate(['/'])
      }
      else {
        alert(res.status)
      }
    },
    err => alert(err)
  );
}

更多信息可以关注Angular handling error

Angular HttpClient 服务仅返回状态码为 200 的响应

Angular HttpClient Service only returning responses with a statuscode of 200

typescript

angular

angular-httpclient