I have services below that I'd like to get status code and handle if statements in it but so far I couldn't figure it out

import { Injectable } from '@angular/core';
import { EnvService } from './env.service';
import { tap } from 'rxjs/operators';
import { Observable, from } from 'rxjs';
import { map, switchMap } from 'rxjs/operators';
import { HttpClient, HttpHeaders } from '@angular/mon/http';
import { NativeStorage } from '@ionic-native/native-storage/ngx';
import { Plugins } from '@capacitor/core';
const { Storage } = Plugins;

@Injectable({
  providedIn: 'root'
})
export class InvoicesServiceService {

  token: any;

  constructor(
    private env: EnvService,
    private http: HttpClient,
    private nativeStorage: NativeStorage
  ) {
    Storage.get({ key: 'token' }).then((token: any) => {
      this.token = JSON.parse(token.value)
    }).catch(error => console.error(error));
  }

  // All
  getInvoices(): Observable<any> {
    const tokenPromise =
    this.token === undefined
      ? Storage.get({ key: 'token' })
      : Promise.resolve(this.token);

    return from(tokenPromise).pipe(
      switchMap((token) => {
        this.token = this.token;
        const httpOptions = {
          headers: new HttpHeaders({
            Accept: 'application/json, text/plain',
            'Content-Type': 'application/json',
            Authorization: this.token.access_token,
          }),
        };
        return this.http
          .get(`${this.env.Dashboard}` + '/invoices', httpOptions)
          .pipe(map((data) => data));
      })
    );
  }

What I try to do is that if, status code is 403 redirect user to specific route other than that just return data.

any idea?

I have services below that I'd like to get status code and handle if statements in it but so far I couldn't figure it out

import { Injectable } from '@angular/core';
import { EnvService } from './env.service';
import { tap } from 'rxjs/operators';
import { Observable, from } from 'rxjs';
import { map, switchMap } from 'rxjs/operators';
import { HttpClient, HttpHeaders } from '@angular/mon/http';
import { NativeStorage } from '@ionic-native/native-storage/ngx';
import { Plugins } from '@capacitor/core';
const { Storage } = Plugins;

@Injectable({
  providedIn: 'root'
})
export class InvoicesServiceService {

  token: any;

  constructor(
    private env: EnvService,
    private http: HttpClient,
    private nativeStorage: NativeStorage
  ) {
    Storage.get({ key: 'token' }).then((token: any) => {
      this.token = JSON.parse(token.value)
    }).catch(error => console.error(error));
  }

  // All
  getInvoices(): Observable<any> {
    const tokenPromise =
    this.token === undefined
      ? Storage.get({ key: 'token' })
      : Promise.resolve(this.token);

    return from(tokenPromise).pipe(
      switchMap((token) => {
        this.token = this.token;
        const httpOptions = {
          headers: new HttpHeaders({
            Accept: 'application/json, text/plain',
            'Content-Type': 'application/json',
            Authorization: this.token.access_token,
          }),
        };
        return this.http
          .get(`${this.env.Dashboard}` + '/invoices', httpOptions)
          .pipe(map((data) => data));
      })
    );
  }

What I try to do is that if, status code is 403 redirect user to specific route other than that just return data.

any idea?

• javascript
• angular
• typescript

3 Answers 3

In ponent where you subscribe this service you can handle error

    this.service
    .getInvoices()
    .subscribe((response) => {
        // This is success
    },
    (error: HttpErrorResponse) => {
        // Handle error
        // Use if conditions to check error code, this depends on your api, how it sends error messages
    });

Another way to handle in service itself.

       return this.http
            .get(`${this.env.Dashboard}` + '/invoices', httpOptions)
            .pipe(map((data) => data))
            .toPromise()
            .then((response) => {
                //Success
            })
            .catch((error: HttpErrorResponse) => {
                // Handle error
            });

In httpOptions, add

{ observe: "response" }

After this, your httpOptions looks like this

const httpOptions = {
  headers: new HttpHeaders({
    Accept: "application/json, text/plain",
    "Content-Type": "application/json",
    Authorization: this.token.access_token,
  }),
  observe: "response",
};

Now you can handle the scenario, in the ponent where you subscribe to this service

this.InvoicesServiceService.getInvoices().subscribe(
  (response) => {
    console.log(response.status);
  },
  (error) => {
    if (error.status === 403) {
      //Redirect here
    }
  }
);

The error is not always sent in the headers. Sometimes the erros es via HTML message, like when NGINX tells you someting before you even get to the backend:

<html>
<head><title>413 Request Entity Too Large</title></head>
<body>
<center><h1>413 Request Entity Too Large</h1></center>
<hr><center>nginx</center>
</body>
</html>

In these cases you should use if (error.includes('413 Request Entity Too Large')) {...}