如何从 Service 获取 HttpStatus 到 Component 或获取 HttpStatus？答案

【问题标题】：How to get HttpStatus from Service to Component or get the HttpStatus?如何从 Service 获取 HttpStatus 到 Component 或获取 HttpStatus？
【发布时间】：2022-01-22 16:28:23
【问题描述】：

我试图从资源名称“imagePayments”列表中获取 Http 状态我从“imagePayments”获取 URL，但服务器上没有任何上传的图像，在我的组件类中，我从服务获取数据，这数据有信息：

界面：

export interface responseMemberObject{
                    infoMember: InfoMember;
                     url_images: UrlImages[];
                     images_payment: UrlImages[];
                    } 
                    
                export interface UrlImages {
                    id: string;
                    name: string;
                    kind: string;
                    url: string;
                }

组件类：

export class MyComponentClass implements OnInit {

 import { HttpClient } from '@angular/common/http';
                 
  
idMember:String;
auxiliarPaymentUrl: string;
responseMemberObject: ResponseMemberObject;
auxiliarBoolean: Boolean;

constructor(private http: HttpClient,
 customService: CustomService){

this.activatedRoute.paramMap.subscribe((params) => {
            this.idMember = params.get('idMember');
}
        
   ngOnInit(): void {
    this.loadMember();
    
}
            
        
        
            loadDataMember() {
                    this.customService.getData(this.IdMember).subscribe((res) => {
                        let resStr = JSON.stringify(res);
                        let resJSON = JSON.parse(resStr);
                        this.responseMemberObject = resJSON;
                    this.listDocumentsMember = this.responseMemberObject.url_images;
        
                    
                    this.imagePaymentUrl = this.responseMemberObject.images_payment[0].url; //The image URL 
            


            this.httpclient.get(this.imagePaymentUrl, { observe: 'response' })
                        .subscribe((response) => {
                            let resStr = JSON.stringify(res);
                            let resJSON = JSON.parse(resStr);
                            this.auxiliarUrl = resJSON;
                            console.log('response: ', response.status);
                            if (response.status == 404) {
                                this.bollean = false;
                            } else {
                                this.bollean = true;
                            }
        
                            console.log('Headers: ', response.headers.get('status'));
                        }); */
                });
            }

如何获取 HttpStatus 或验证是否存储了图像？我尝试了许多示例，但我缺少一些东西。

当图像存在时，我得到了这个

HttpErrorResponse {headers: HttpHeaders, status: 200, statusText: "OK", url:"http://server.doamain/folder/images/idMember/paymentImage/"
error: {error: SyntaxError: Unexpected token � in JSON at position 0 at JSON.parse

或者如果图像没有存储在服务器中，我得到了这个：

HttpErrorResponse {headers: HttpHeaders, status: 404, statusText: "OK", url:"http://server.doamain/folder/images/idMember/paymentImage/"

【问题讨论】：

标签： angular typescript http angular-components angular-httpclient

【解决方案1】：

这将捕获所有错误：

 this.httpclient.get(this.imagePaymentUrl, { observe: 'response' })
     .subscribe(response => {},
                errors=>{});

【讨论】：

【解决方案2】：

您遇到了第一个错误，因为您正在观察响应并尝试在HttpResponse 上使用JSON.parse（在对其进行字符串化之后..），错误说是意外令牌，因为它不是有效的 JSON。当您观察响应时，成功的响应在body 内部。你不需要解析它，Angular http-client 会处理这个。

在第二个响应中，您正确地收到了 404 错误，但您没有正确处理它，实际上您根本没有处理它！

所以你的代码应该是这样的（使用 rxjs 7+ 时）

this.httpclient.get(this.imagePaymentUrl, { observe: 'response' })
  .subscribe({
    next: (data) => {
      console.log(data.body); // here is the actual response from server
    },
    error: (err) => {
      console.log(err.status);
    }
  });
}

作为进一步的建议，我建议处理对服务的 http 调用，这通常是我们的做法。

【讨论】：