Display notification if the request exceeds the expected duration

Is there a way to display a message when a request is taking too long? For instance, if the request exceeds 10 seconds in duration, I want to show a message asking the user to wait until it finishes.

fetchData(url, requestParams) {
  return this.restService.get('url', requestParams)
}

displayMessage(duration) {
 setTimeout( () => {
     console.log("The request is taking more than 10 seconds. Please be patient.")
 }, duration)

}

I attempted using setTimeout but did not achieve the desired outcome.

Answer №1

The solution appears to be Intercept, which is a great fit for this particular scenario.

 requestTimeout;

displayAlert(time) {
    clearTimeout(this.requestTimeout);
    this.requestTimeout = setTimeout(() => {
        console.log("the request is taking more than 10s, please wait.");
        }, time)
}
  
intercept(req: HttpRequest<any>, next: HttpHandler) {
    this.displayAlert(10000);

    return next.handle(authReq).pipe(
        tap(resp => {
            if (resp instanceof HttpResponse) {   
                clearTimeout(this.requestTimeout);
            }
        })
    );
  };  

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular5: Utilizing animations to seamlessly swap out content within a div, smoothly adjust the height of a container, and elegantly fade out the existing content. (See the provided "nearly perfect" Pl

As I work on implementing an animation in Angular 5 to swap the content of a container and adjust the height accordingly, I encounter some challenges. The animation should proceed as follows: 1. Fade out the current content (opacity 1->0) 2. Adjust th ...

Troubleshooting Angular 2: Why Array Interpolation is Failing

Greetings everyone, I am diving into Angular 2 and attempting to create a basic Todo application. Unfortunately, I've hit a roadblock. My array interpolation seems to be malfunctioning. Any assistance would be greatly appreciated. Here is my AppCompo ...

How can I efficiently showcase computed values on a series of components in Angular using a specific pattern?

Within my app are tabs that display different types of input data retrieved from a database. These inputs are used to calculate various metrics across multiple tabs, including one tab that integrates a 3rd party websocket for live data calculations. All t ...

Utilizing the NPM package as a JSX Component is prohibited due to type errors

I've been encountering some unusual type errors in my TypeScript project with certain packages. For example: 'TimeAgo' cannot be used as a JSX component. Its instance type 'ReactTimeago<keyof IntrinsicElements | ComponentType<{} ...

Transferring extensive data from AgGrid to Clipboard

Hello, I am encountering an issue with a large triangle data set (300x300) in ag-Grid. While I am able to export it to CSV/xls without any problems, I am unable to copy and paste the data using Ctrl+A and Ctrl+C/Ctrl+V. Strangely enough, this functionali ...

Exploring FileReader in conjunction with React and Typescript

I am facing an issue while trying to upload a JSON file using an input element of type file. When I attempt to use the onload method on FileReader in TypeScript, I receive an error message saying "Cannot invoke an object which is possibly 'null'. ...

The style fails to load correctly upon the page's initial loading

I am utilizing <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4d26282823603e212429283f0d7b63756378">[email protected]</a> in a <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="026c677a76 ...

Bring in jspm libraries to your project via typescript

While researching how to import jspm packages into typescript, I noticed that most examples assumed the use of SystemJS for loading and interpreting them in the browser. However, I prefer using tsc to compile commonjs modules and only import the js code, a ...

Experimenting with the static method within a singleton class using Typescript and Sinon

I have a separate layer in my application that uses a DAO class to retrieve data from the repository. I've implemented the DAO class as a Singleton and made its methods static. In another class, I've created service methods to manipulate the dat ...

Issue detected with XMLHttpRequest - "The requested resource does not have the 'Access-Control-Allow-Origin' header."

Currently, I am working on the frontend development of an application using Angular 2. My focus is on loading an image from a third-party site via XMLHttpRequest. The code I have implemented for this task is as follows: loadFile(fileUrl) { const ...

Create a custom class that functions similarly to a dictionary

Is it not feasible to achieve this? interface IMap { [key: string]: string; } class Map implements IMap { public foo = "baz"; } But instead of success, I encounter the error: TS2420:Class 'Map' does not correctly implement 'IMap& ...

Angular, Transforming JSON with RxJS Operators in TypeScript

Upon receiving the JSON object (Survey) from the server, it looked like this: { "id": 870, "title": "test survey", "questions": [ { "id": 871, "data": ...

The Angular formGroup isn't activating the radio button as expected

Hey there! I'm currently working on react forms within Angular. My goal is to have two radio buttons selected based on the true/false status in the database. When the variable viernesOk is set to true, everything works perfectly (the "SI" radio butto ...

Angular 5: There was an issue with the property not defined for lowercase conversion

I keep encountering this error whenever I attempt to filter a column of a table. The data is retrieved from a FireStore cloud collection and the 'auteur' field is defined in each document. Here is how my component looks: import { Component, OnI ...

How to bring in images from the assets folder using React and Typescript

I'm facing an issue where direct image importing is working, but when using object types, it's not functioning properly. Why could this be happening? I am currently working with "react": "^16.12.0" and "typescript": "~3.7.2" // ./src/assets/baby ...

Exploring alternative methods for accessing object values in TypeScript using a string object path without relying on the eval function

If we have an object in JS/typescript structured like this: var obj = { a: { b:{ c:1 } } } And a string "b.c" is given, how can we evaluate this using only the variables provided and retrieve the value 1 from the object without rel ...

esBuild failing to generate typescript declaration files while running in watch mode

Recently dove into using edBuild and I have to say, it's been a breeze to get up and running - simple, fast, and easy. When I execute my esBuild build command WITHOUT WATCH, I can see that the type files (.d.ts) are successfully generated. However, ...

Organizing Telephone Number Entries in Angular

In my search for a way to format a phone number input field in Angularjs, I have come across many solutions, but none specifically for Angular 7. What I am looking to achieve is for the user to enter the textfield like so: 123456789 and have the textfi ...

A feature that continues to operate even when the application is not in the foreground in Angular Ionic

Is there a way to create a function in an Angular Ionic service that will always execute if a certain condition is true (based on API response), even when the app is not in the foreground? The function is responsible for calling capacitor geolocation watch ...

Is it necessary to unsubscribe from an Angular HTTP-Request when using switchMap?

I have a question about managing subscriptions in my Angular application. I'm currently using the combineLatest operator to create an observable from two Angular observables, route.params and route.queryParams. This combined observable is then used as ...