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

Error: The value for $regex must be in the form of a string

Encountering a problem with an error in the Console: { [MongoError: $regex has to be a string] name: 'MongoError', message: '$regex has to be a string', waitedMS: 0, ok: 0, errmsg: '$regex has to be a string', code ...

javascripthtmlajaxnode.jsmongodb

checkbox appear based on vue condition

I have checkboxes on my list that are always checked, but I only want them to be checked if the associated object's property "include" is set to true. Currently, all the checkboxes are checked by default, and when I click on them, they uncheck and ex ...

javascriptvue.jscheckbox

Verify the dimensions of the file being uploaded

I have a file uploader component that requires a dimensions validator to be added. Below is the code for the validator: export const filesDimensionValidator = (maxWidth: number, maxHeight: number): ValidatorFn => (control: AbstractControl): Vali ...

javascriptangulartypescript

How should a value be correctly retrieved from a separate function?

Let's say there is a function: function name(){ var first_name = "mike"; } The goal is to pass the value of first_name to another function. One way to do this is: function name(){ var first_name = "mike"; getName(first_name); } But what if y ...

javascriptnode.js

Ways to ensure that the height of the second row in the second column matches that of the first column

My current layout design is causing an issue where the lower green box extends beyond the total height of the entire box. I've provided a rough version of my code on codepen. Using the Bulma framework, my goal is to align the height of the left column ...

javascripthtmlcssbulma

Setting the value of a custom component property dynamically after the component has been rendered

I'm currently developing an Angular application and have a specific requirement to work on. I am using a custom component with 3 inputs, and I want to bind this custom component tag in the HTML of my page. <my-column [setInfo]="info" [dis ...

javascriptangulardomcomponents

jQuery is malfunctioning following an AJAX request

Can anyone help me fix an issue with my jQuery code? I have a hidden div that should be shown when the mouse hovers over a sibling element. However, it seems like after my AJAX function is executed, the jQuery stops working. <div class="parent"> ...

javascriptjqueryhtmlajax

Encountered a TypeError in Angular printjs: Object(...) function not recognized

I'm currently working on integrating the printJS library into an Angular project to print an image in PNG format. To begin, I added the following import statement: import { printJS } from "print-js/dist/print.min.js"; Next, I implemented the pri ...

javascriptangulartypescriptprintjs

Issue with Angular: RouterLinkActive fails to work properly with formControlName

I am currently working on a vertical navigation bar that allows the user to navigate to different components. However, I am facing an issue where when I click on a list item, it's supposed to be active but I have to click on it to navigate to the comp ...

htmlcssangulartypescript

Encountered issue when attempting to insert items into the list in EventInput array within FullCalendar and Angular

I am struggling to create a dynamic object that I need to frame and then pass to the FullCalendar event input. Here is my initial object: import { EventInput } from '@fullcalendar/core'; ... events: EventInput[]; this.events = [ { title: &ap ...

angulartypescriptfullcalendar

Ways to identify when the user has stored a file on their local disk using Angular/NodeJS

In my NodeJS backend, I am generating a JSON file temporarily to store the information provided by the user in a form. Upon clicking the download button at the end of the form, I execute a Python script within NodeJS to verify the data and create a tempora ...

javascriptangularjsjsonnode.jshttp

Harnessing the power of React context alongside React hooks in TypeScript

Here is an example demonstrating my attempt at implementing react's context with react hooks. The goal is to easily access context from any child component using the code snippet below: const {authState, authActions} = useContext(AuthCtx); First, I ...

reactjstypescriptreact-contextreact-hooks

Modification of window size using jQuery animations

Currently, I am working on creating a sidebar that slides in from the left side of the screen. To achieve this effect, I have set the menu element to float left with a width of 40% and a margin-left of -40%. However, when I try to reveal the sidebar by sw ...

javascriptjqueryhtmlcss

Setting up Angular-CLI on a Windows 10 system

I encountered some challenges while trying to install angular-cli on my Windows 10 system. The issues revolved around Python dependencies and node-gyp, manifesting in error messages similar to the following: ><a href="/cdn-cgi/l/email-protection" ...

javascriptnode.jsangularwindows-10

Update the URL for the Swagger 2.0 documentation path

This is how I set up swagger : const openapi = Openapi.initialize({ paths: openApiPaths, app, apiDoc, }); const openApiSpec = openapi.apiDoc; console.log(openApiSpec); app.use(swaggerUI(openApiSpec)); How do I update the base path ...

node.jstypescriptswagger

performing a jQuery AJAX call from a UIWebView during the initial launch of the app following installation

We have a uiWebview that uses jquery for an ajax request to log in. It functions flawlessly on mobile safari and all browsers. However, when the application is launched for the first time after installation, the ajax request seems to be sent out but no re ...

javascriptjqueryiosajaxuiwebview

Closing the modal by simply clicking outside of it's boundaries

Is there a way to close the modal by clicking outside of it using pure JS or AngularJS? I'm struggling to figure out how to implement this functionality. Any assistance would be greatly appreciated. View Fiddle .modalDialog { position: fixed; ...

javascriptcssangularjspopup

TypeScript Library encounters issues when importing a specific data type

I recently integrated a library into my Next.js application to manage layouts using useState in react-grid-layout. To make this work with TypeScript, I had to install the necessary package shown below: npm install --save @types/react-grid-layout The code ...

typescriptnext.jsreact-grid-layout

Remove the list by conducting a comparison analysis

<html> <head> <title> Manipulating List Items Using JavaScript </title> <script type="text/javascript"> function appendNewNode(){ if(!document.getElementById) return; var newlisttext = document.changeform.newlist.val ...

javascriptjqueryhtml

Encountering a Node.js error when executing the JavaScript file

When I try to run my Node.js application using the command "node main.js" in the terminal, I encounter an error saying "Error: Cannot find module 'D:\nodeP\main.js'". This is confusing for me as I have set the environment variable path ...

javascriptreactjsnpmenvironment-variables