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

Error Encountered When Trying to Import Mocha for Typescript Unit Testing

Discovering the generic type from an optional parameter within a constructor

How do I set up middleware with async/await in NestJS?

I am experiencing issues with my Jest unit test case for Material UI's multi select component failing

Dynamically generating an Angular component and populating it with data

Establishing a connection between MySQL database and an Ionic/Angular application

Exploring nested objects and arrays with Plunker - extracting their values

When testing my POST request online, it functions properly. However, I am facing difficulties in getting it to work in next.js as I keep receiving a 405

Icon appearing outside the button instead of inside

Mastering the art of Promises and handling errors

Using the return statement to set a value from a callback function in TypeScript

The Angular 8 application is opting for "module" scripts over es5 when loading on IE11

Nestjs: Step-by-step guide to removing a specific application from a Nestjs monorepo using nest/cli

I want to swiftly display the API response using console.log in Angular 8

How can I access members outside of a class without a name in Typescript?

Tips for properly narrowing a function parameter that includes "an object key or a function"

Attempting to transfer information between components via a shared service

Unable to find the locally stored directory in the device's file system using Nativescript file-system

Is Typescript compatible with the AWS Amplify Express API?

What is causing the error message "may require a suitable loader" to appear when I add my TypeScript Node module to my Next.js application?