如何以角度获取http响应的状态码？答案

【问题标题】：How to get status code of http response in angular?如何以角度获取http响应的状态码？
【发布时间】：2021-01-28 10:38:49
【问题描述】：

我想根据 HTTP 响应的状态代码显示一个带有文本的 toast。服务代码：-

private options = {
    headers: new HttpHeaders()
      .set("Content-Type", "application/json")
      .set("x-app-id", this.appId)
      .set("x-app-key", this.appKey)
      .set("observe","response")
  };
  constructor(private http: HttpClient) {}
  search(query: string): Observable<{}>  {
    return this.http.post(this.url, {query: query}, this.options)
  }

这就是我在前端所做的：-

search() {
    this.showcard = false;
    this.isLoading = true;
    this.nutrix.search(this.searchValue).subscribe((res) => {
      if(res){
        this.isLoading = false;
        this.showcard = true;
        this.queryResult = res["foods"][0];
        this.imageUrl = this.queryResult['photo']['thumb']
      }
      console.log(this.queryResult);
    },(error) => {
      console.log(error);
      this.isLoading = false;
    });

  }

【问题讨论】：

你在错误回调中得到console.log(error);，如果你没有状态，你也可以添加它..
在那里找到了那个状态码。谢谢！

标签： angular http error-handling http-response-codes

【解决方案1】：

最好使用带有拦截器的错误处理

import {
 HttpEvent,
 HttpInterceptor,
 HttpHandler,
 HttpRequest,
 HttpResponse,
 HttpErrorResponse
} from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { retry, catchError } from 'rxjs/operators';
import { ToastrService } from "ngx-toastr";
import { Router } from "@angular/router";

export class HttpErrorInterceptor implements HttpInterceptor {
constructor(private toastr: ToastrService, private router: Router) {}
 intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
   return next.handle(request)
     .pipe(
       retry(1),
       catchError((error: HttpErrorResponse) => {
         if (error instanceof HttpErrorResponse) {
      if (error.error instanceof ErrorEvent) {
        console.log("Error Event");
      } else {
        console.log(
          `error status : ${error.status} ${JSON.stringify(error.error)}`
        );
        switch (error.status) {
          case 401:
            this.router.navigateByUrl("/login");
            break;
          case 403:
            this.router.navigateByUrl("/unauthorized");
            break;
          case 0:
          case 400:
          case 405:
          case 406:
          case 409:
          case 500:
            this.handleAuthError(error);
            break;
        }
      }
    } else {
      console.error("something else happened");
    }

    return throwError(error);
       })
     )
 }
public handleAuthError(error: any) {
    console.log("error ", error);
    let msg = "";
    if (error !== undefined && typeof error === "string") {
      msg = error;
    } else if (error.error !== undefined && typeof error.error === "string") {
      msg = error.error;
    } else if (
      error.error.error !== undefined &&
      typeof error.error.error === "string"
    ) {
      msg = error.error.error;
    } else {
      msg = error.error.error.errors
        ? error.error.error.errors[0].errorMessage
        : "Something went wrong";
    }
    this.toastr.error(msg, "", {
      timeOut: 3000,
      positionClass: "toast-bottom-center",
    });
  }
}

在app.module.ts

中添加这个标签

providers: [
   {
     provide: HTTP_INTERCEPTORS,
     useClass: HttpErrorInterceptor,
     multi: true
   }
 ]

【讨论】：

【解决方案2】：

您可以从 HttpErrorResponse 调用 error.status。

this.nutrix.search(this.searchValue).subscribe((res) => {
    // response
},(error) => {
    console.log(error.status);
});

【讨论】：