Determine whether a response is not received within 8 seconds

One of the methods in my Angular component is responsible for returning data

Here is a snippet of that method

 getRecognitionById() {
    this.loaderService.show(null, true);
    forkJoin(
      this.vendorWebApiService.getRecognitionById(this.executiveChangeId),
      this.vendorWebApiService.getLatestFeedback(this.executiveChangeId)).pipe(take(1))
      .subscribe(res => {
        this.recognitionData = res[0];
        this.latestFeedback = res[1];
        this.generateResponseFeedbackGroup();
        this.loaderService.hide(true);
      });
  }

I want to implement a functionality where if the response is not received within 8 seconds, I need to alert the user with 

alert(response.exceptionMessage);

Can someone guide me on how to achieve this?

javascriptangulartypescriptrxjs

Answer №1

To introduce a delay, you can utilize the timeout operator:

// import { throwError, TimeoutError } from 'rxjs';
// import { catchError, timeout } from 'rxjs/operators';

fetchRecognition() {
    this.loaderService.display(null, true);
    forkJoin(
      this.vendorWebApiService.getRecognitionById(this.executiveChangeId),
      this.vendorWebApiService.getLatestFeedback(this.executiveChangeId)).pipe(
        take(1),
        timeout(8000),
        catchError((err) => {
          if (err instanceof TimeoutError) {
            // alert(response.exceptionMessage);
          }

          return throwError(err);
        }),
      )
      .subscribe(res => {
        this.recognitionData = res[0];
        this.latestFeedback = res[1];
        this.generateResponseFeedbackGroup();
        this.loaderService.hide(true);
      });
  }

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

Encountering syntax errors in GraphQL

Currently, I am in the process of working on the GraphQL Node tutorial and have reached step 7. Visit this link to view Step 7 While implementing the code in my datamodel.prisma file, I encountered several syntax errors: directive @id on FIELD_DEFINITIO ...

javascriptnode.jsgraphql

Unable to apply styling to table cells that are dynamically added using JQuery within an Angular

Currently working on setting up a form using Angular. Within the hotel.view.html file, there is a table that looks like this: <table id="rooms"> <tr> <td>Room Type</td><td>Beds</td><td>Q.ty</td ...

jquerycssangular

What is the simplest method for invoking a C# function from JavaScript?

I am facing an issue with a LinkButton control in my project. I need to attach a c# method to it, but when I add the control to the page using parse control function, it changes the call to javascript and results in an undefined error. I have been trying t ...

c#asp.netjavascriptdotnetnuke

The map buttons are located underneath the map, and unfortunately, it seems that setting the map height to 100% using Angular is

Upon completing the creation and display of the map, an unusual occurrence is taking place where the map buttons ("Zoom rectangular, map settings, and scale bar") are appearing below the map as oversized icons. Additionally, there is a challenge when setti ...

angulartypescriptmapshere-apihere-maps-rest

How can I inform Typescript that an interface will exclusively consist of defined members?

My interface looks like this interface Person { name?:string; age? :number; gender?:string } I need to reuse the same interface type, but with a modification indicating that all members will never be undefined. The updated version would look like this: ...

typescript

Connecting React.js with Socket.io for real-time communication and managing application

Hello, I am currently working on saving the response from my socket in a state via the backend. Here is a method where messages are sent to the socket: export default class Home extends Component { constructor(){ super() this.state ...

javascriptnode.jsreactjssocket.io

Is there a way to merge TypeScript code with C++ during compilation?

Currently, I have a project written entirely in C++. However, there is an additional file written in typescript because I couldn't find equivalent libraries in C++. This typescript file performs the following actions: It contains a typescript CLI cod ...

c++typescriptgcclinkerts-morph

Issue with MVC 4 Asynchronous File Upload: Controller Always Receiving Null Value

I'm encountering an issue while attempting to upload a file asynchronously from ajax to my controller. I am passing 3 variables - PictureId, PictureName, and PictureFile. The problem specifically lies with the "PictureFile" variable as it consistently ...

javascriptjqueryajaxasp.net-mvcparameter-passing

What is the best method for converting a list tag into an array of objects with XPath?

I am attempting to extract the ordered list and generate an array of list tags along with their content. I have experimented with different paths, such as: //li[div/@class="business-info"] //li[div[@class="business-info"]] //li[descendant::div[@class="bu ...

javascripthtmlarraysnode.jsxpath

Switch between classes when hovering over / exiting ngFor elements

Displayed below is an element created using ngFor <span *ngFor="let picture of pictures; let i = index"> <a target="_blank" href="{{picture.image}}" class="thumbnail-display image-overlay"> <span class="overlay-icon hide"> ...

javascriptangulartypescriptangular7

What is the preferred method for updating a variable value - Ajax or PHP?

I'm in the process of creating a dropdown survey for new visitors using cookies to collect data, but I'm a bit confused on how to implement it. If a button is clicked, the onClick event will trigger var answer1 = answer1 + 1 , or something simil ...

javascriptphpjqueryarraysajax

Attempting to display a singular form

Currently, I am working on a MERN app and encountering a small issue... I am developing an application where users can create rooms and within those rooms, they can plan their daily activities. It's similar to a TODO app but more intricate. I wanted ...

javascriptreactjslogic

Move the creation of the HTML string to an HTML template file within ngx bootstrap popover

I have incorporated ngx bootstrap in my project through this link To display dynamic HTML content in the popover body, I am using a combination of ngx-bootstrap directives and Angular template syntax as shown below: <span *ngFor="let item of items;"&g ...

angularangular2-templateangular2-directivesbootstrap-popoverngx-bootstrap

methods for array filtering in typescript

How do I filter an array in TypeScript? I attempted the following findAllPersonsNotVisited():Observable<Person[]> { var rightNow = new Date(); var res = rightNow.toISOString().slice(0,10).replace(/-/g,"-"); return this.db.list(& ...

arraystypescriptfilter

Incorporate Lodash into your Angular2 project within Visual Studio 2015

I've been attempting to incorporate the lodash dependency into my project, but I keep encountering issues during the VS2015 build process. The error message in the build output states "Build: Cannot find module 'lodash'", causing the build t ...

angularnpmlodash

Implement static backgrounds on images within an Angular application

I am new to using Angular 7 and I have hit a roadblock. I need help understanding how to resize images so that either the height is 270 and the width is less than 470, or the width is 470 and the height is less than 270. Once resized, I want to place these ...

angularimage

Error message is not shown by React Material UI OutlinedInput

Using React and material UI to show an outlined input. I can successfully display an error by setting the error prop to true, but I encountered a problem when trying to include a message using the helperText prop: <OutlinedInput margin="dense&quo ...

javascriptreactjstypescriptmaterial-ui

Preserve the iframe src value in the dropdown menu even after the page is refreshed

I am trying to figure out how to prevent the iframe src from changing when I refresh the page, unless the user manually changes it using the dropdown menu with JavaScript. Can someone help me with this? <div class="row"> <div class="span9"> ...

javascriptjqueryhtmliframe

Calculating the total length of an SVG element using React

Looking to animate an SVG path using React (similar to how it's done in traditional JavaScript: https://css-tricks.com/svg-line-animation-works/), but struggling when the path is created using JSX. How can I find the total length of the path in this s ...

javascriptreactjssvgcss-animations

What is the best way to update my data from the parent component?

Hello, I am trying to update the timestamp value from the parent component. This is my ParentComponent.ts file: public updateTimestamp(){ this.timestamp = new Date(); this.timestamp.setDate(this.timestamp.getDate() - 30); this.timestamp = thi ...

angular