How can I check the success of my http request?

Question

I have a get request that returns a picture of a player, but if there is no picture for actual player I get an error code of 403 and nothing is displayed.

How to solve this?

This is the service:

public GetPlayerImage(id: number): Promise<Blob>{
    return  this.http.get<Blob>('https://divanscore.p.rapidapi.com/players/get-image?playerId=' + id, {
      headers: {
        'x-rapidapi-host': 'divanscore.p.rapidapi.com',
        'x-rapidapi-key': 'XXXX'
      },
      responseType: 'blob' as 'json'
    }).toPromise();
  }

This is the component.ts:

ngOnInit(): void {
    this.route.queryParams.subscribe(async (params) => {

      if (params.playerId !== null && params.playerId !== undefined) {
        this.player = await this.playerService.GetOnePlayer(params.playerId);
        this.playerClub = await this.playerService.GetOnePlayerClub(params.clubId);
        await this.getImageFromService();
        this.isLoading = false;
      }
    });
  }

createImageFromBlob(image: Blob) {
    let reader = new FileReader();
    reader.addEventListener('load', () => {
      this.imageToShow = reader.result;
    }, false);

    if (image) {
      reader.readAsDataURL(image);
    }
  }

  async getImageFromService() {
    this.createImageFromBlob(await this.playerService.GetPlayerImage(this.player.playerId));
  }

UPDATE

It now displays, but it is still red in the console and indicates an error ... how can this be fixed?

Image

Answer 1

First. Do you have any interceptor?

if not, we can catch like:

async getImageFromService() {
   const imageContent = await this.playerService.GetPlayerImage(this.player.playerId).catch((error) => {
       // error will come here.
   })

   this.createImageFromBlob(content);
  }

or you can try/catch

async getImageFromService() {
   try {
     const imageContent = await this.playerService.GetPlayerImage(this.player.playerId);
     this.createImageFromBlob(content);

   } catch (error) {
     // the error will be there
   }
  }