Tips for patiently anticipating the completed response within an interceptor

Question

Tips for patiently anticipating the completed response within an interceptor

Using the interceptor, I want to display a loading spinner while waiting for subscriptions to complete. This approach works well in individual components by showing and hiding the spinner accordingly:

ngOnInit() {
    this.spinnerService.show();
    this.service.methodName().subscribe(data => {
    },error => {
    },() => {
        this.spinnerService.hide();
    })
}

However, implementing this functionality in the interceptor poses a challenge. The spinner briefly appears only when the request is made, disappearing quickly even for longer requests:

 if (request.url.includes(this.apiUrl)) {
    this.spinnerService.show();
    let headers = new HttpHeaders();
    headers = headers.append('Content-Type', 'application/json');
    headers = headers.append('Authorization', `Bearer ${token}`);
    cloneRequest = request.clone({ headers: headers });
} else {
    cloneRequest = request.clone();
}
return next.handle(cloneRequest).pipe(map(response => {
            this.spinnerService.hide();
            return response;
        })).pipe(catchError(error => {
            let errorMessage = 'An unexpected error occured';
            if (error.error && error.error.message) {
                errorMessage = error.error.message;
            }
            // TODO: Error notifications are currently disabled.
            if (request.url.includes('login')) {
                this.notificationService.showError(errorMessage);
            }
            return throwError(error)
        }));

angular typescript interceptor

Answer 1

Answer №1

One issue that arises is due to multiple API requests being made, causing the spinner to hide after the first request even if subsequent requests are still pending. To address this, a counter can be implemented in the spinnerService:

@Injectable({
  providedIn: 'root'
})
export class SpinnerService {
  get shouldDisplay(): boolean {
    return !!this.counter;
  }

  private counter: number = 0; 

  show(): void {
    this.counter++;
  }

  hide(): void {
    this.counter = Math.max(0, this.counter - 1);
  }
}

An adjustment is needed in the interceptor to handle this properly. For API calls that do not require the spinner to be displayed, the counter should not be decreased. Utilizing the finalize operator from rxjs is an ideal solution for this:

const showSpinner = request.url.includes(this.apiUrl);

if (showSpinner) {
  this.spinnerService.show();

  clonedRequest = request.clone({ headers: new HttpHeaders({
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${token}`
  }) });
} else {
  clonedRequest = request.clone();
}

return next.handle(clonedRequest).pipe(
  catchError(error => //...),
  finalize(() => {
    if (showSpinner) {
      this.spinnerService.hide();
    }
  })
);

Creating a wrapper service for Ng4LoadingSpinnerService can be as straightforward as shown below:

@Injectable({
  providedIn: 'root'
})
export class SpinnerService {
  private counter: number = 0; 

  constructor(private loadingSpinnerService: Ng4LoadingSpinnerService) {}

  show(): void {
    if (!this.counter) {
      this.loadingSpinnerService.show();
    }

    this.counter++;
  }

  hide(): void {
    this.counter = Math.max(0, this.counter - 1);

    if (!this.counter) {
      this.loadingSpinnerService.hide();
    }
  }
}

Answer 2

One issue that arises is due to multiple API requests being made, causing the spinner to hide after the first request even if subsequent requests are still pending. To address this, a counter can be implemented in the spinnerService:

@Injectable({
  providedIn: 'root'
})
export class SpinnerService {
  get shouldDisplay(): boolean {
    return !!this.counter;
  }

  private counter: number = 0; 

  show(): void {
    this.counter++;
  }

  hide(): void {
    this.counter = Math.max(0, this.counter - 1);
  }
}

An adjustment is needed in the interceptor to handle this properly. For API calls that do not require the spinner to be displayed, the counter should not be decreased. Utilizing the finalize operator from rxjs is an ideal solution for this:

const showSpinner = request.url.includes(this.apiUrl);

if (showSpinner) {
  this.spinnerService.show();

  clonedRequest = request.clone({ headers: new HttpHeaders({
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${token}`
  }) });
} else {
  clonedRequest = request.clone();
}

return next.handle(clonedRequest).pipe(
  catchError(error => //...),
  finalize(() => {
    if (showSpinner) {
      this.spinnerService.hide();
    }
  })
);

Creating a wrapper service for Ng4LoadingSpinnerService can be as straightforward as shown below:

@Injectable({
  providedIn: 'root'
})
export class SpinnerService {
  private counter: number = 0; 

  constructor(private loadingSpinnerService: Ng4LoadingSpinnerService) {}

  show(): void {
    if (!this.counter) {
      this.loadingSpinnerService.show();
    }

    this.counter++;
  }

  hide(): void {
    this.counter = Math.max(0, this.counter - 1);

    if (!this.counter) {
      this.loadingSpinnerService.hide();
    }
  }
}

Tips for patiently anticipating the completed response within an interceptor

Answer №1

Similar questions

What is the process for setting up a resthook trigger in Zapier?

Using Angular Form Builder to assign a value depending on the selected option in a dropdown menu

An essential aspect of utilizing ngrx is understanding how to access the previous and current state to effectively compare them when subscribing to the store

Setting the location of the global nprmrc file on a Windows operating system

Developing multi-layered business solutions with Angular front-end that incorporate customized localization in .Net Core Entity MVC is essential for ensuring effective business logic implementation

having difficulty sending a post request with Angular

Encountering an error of TypeError while attempting to generate a new GraphQL

Is the Angular 16 button being properly interpreted?

Determining the best method for change detection in Angular 2: Choosing between Observable, EventEmitter, and Dot Rule

Tips for effectively utilizing TypeORM transactions

Tap into the live monitoring feature of angular-cli build

Using Angular to fetch API response and convert it into a promise

Implement real-time word counting in Angular as users type

Is there a way to conduct testing on code within an Angular subscribe block without risking values being overwritten in the following subscribe blocks?

Clicking on a single checkbox causes the entire input to become deactivated due to the way the system is

Iterate over a collection of HTML elements to assign a specific class to one element and a different class to the remaining elements

Issue with the declaration of custom types in Typescript

Trouble with Angular 7: Form field not displaying touched status

Troubleshooting Angular and Auth0: Understanding the issue with loginWithRedirect() always returning isAuthenticated$ as false

Using RxJS pubsub to transform an Observable<any> into a string or object