How to get HttpStatus from Service to Component or get the HttpStatus?-CodePudding

im trying to get the Http Status form a list ofresources names "imagePayments" I got URLs from "imagePayments" but there isn't any uploated image on the server, here in My component class i get data from a Service and this data has information:

The interface:

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

The component class:

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'));
                        }); */
                });
            }

How can I get the HttpStatus or validate thar there is an images stored? I tried many of the examples but there is something that Im missing.

When an images exists I got this

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

or if the image is not stored in the server I got this:

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

CodePudding user response：

This will catch all errors :

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

CodePudding user response：

You are getting the first error, because you are observing the response and trying to JSON.parse (after stringifying it..) on a HttpResponse, which the error says, unexpected token, as it is not valid JSON. When you are observing the response, the successful response is inside body. You don't need to parse it, Angular http-client takes care of that.

In the second response, you correctly get a 404 error, but you are not handling it correctly, actually you are not handling it at all!

So your code should look like this (when using 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);
    }
  });
}

As a further suggestion, I would recommend the handling of http-calls to a service, that is usually how we do it.