Tips for handling delayed HTTP API responses in Angular

Question

Tips for handling delayed HTTP API responses in Angular

While working on my project, I encountered a delay in response when using the

this.ServiceHandler.getTxnInfo([], params)

API. To handle this, I implemented the use of setTimeout along with async/await. Despite these modifications, my promise ended up being rejected.

bookingInfo = [];

  timeout(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }

This segment showcases the API request being made to retrieve booking information.

async getBookingInfo(dateType: string) {
    const params = [];
    params.push({code: 'dateType', name: dateType});
    params.push({code: 'fromDate', name: '2019-01-01'});
    params.push({code: 'toDate', name: '2019-05-31'});
    return await this.ServiceHandler.getTxnInfo([], params).toPromise();
  }

getBookingDetails() {
    this.timeout(150057 ).then(() => this.getBookingInfo('BOOKING').then(
      bookings => {
        console.log(bookings);
      }));
  }

Unfortunately, when trying to print out console.log(bookings);, the promise gets rejected and the get requests fail. I encountered the following error message: https://i.sstatic.net/jQgmz.png

Any insights on how I can resolve this issue would be greatly appreciated.

angular typescript promise async-await

Answer 1

Answer №1

By implementing the async and await keywords in your code, you can achieve the desired functionality.


async fetchReservationInformation(dateType: string) {
 const parameters = [];
 parameters.push({type: 'dateType', value: dateType});
 parameters.push({type: 'fromDate', value: '2019-01-01'});
 parameters.push({type: 'toDate', value: '2019-05-31'});
 return await this.ReservationService.fetchTransactionInfo([], parameters).toPromise();
}

async retrieveBookingDetails() {
 await this.fetchReservationInformation('BOOKING').then(
  bookings => {
    console.log(bookings);
 });
}

Answer 2

By implementing the async and await keywords in your code, you can achieve the desired functionality.


async fetchReservationInformation(dateType: string) {
 const parameters = [];
 parameters.push({type: 'dateType', value: dateType});
 parameters.push({type: 'fromDate', value: '2019-01-01'});
 parameters.push({type: 'toDate', value: '2019-05-31'});
 return await this.ReservationService.fetchTransactionInfo([], parameters).toPromise();
}

async retrieveBookingDetails() {
 await this.fetchReservationInformation('BOOKING').then(
  bookings => {
    console.log(bookings);
 });
}

Answer 3

Answer №2

In order to make this code more suitable for Angular and avoid promises, let's modify it. There is no need to change observables to promises using toPromise()

fetchBookingData(dateType: string): Oservable<SOME_TYPE_HERE> {
  const params = [];
  params.push({code: 'dateType', name: dateType});
  params.push({code: 'fromDate', name: '2019-01-01'});
  params.push({code: 'toDate', name: '2019-05-31'});
  return this.ServiceHandler.getTxnInfo([], params);
}

retrieveBookingInformation(): void {
  this.fetchBookingData('BOOKING').subscribe(bookings => {
    console.log(bookings);
  });
}

Let's test this code without promises to see if it functions correctly. If it doesn't, we can eliminate promises as the potential cause.

Answer 4

In order to make this code more suitable for Angular and avoid promises, let's modify it. There is no need to change observables to promises using toPromise()

fetchBookingData(dateType: string): Oservable<SOME_TYPE_HERE> {
  const params = [];
  params.push({code: 'dateType', name: dateType});
  params.push({code: 'fromDate', name: '2019-01-01'});
  params.push({code: 'toDate', name: '2019-05-31'});
  return this.ServiceHandler.getTxnInfo([], params);
}

retrieveBookingInformation(): void {
  this.fetchBookingData('BOOKING').subscribe(bookings => {
    console.log(bookings);
  });
}

Let's test this code without promises to see if it functions correctly. If it doesn't, we can eliminate promises as the potential cause.

Tips for handling delayed HTTP API responses in Angular

Answer №1

Answer №2

Similar questions

The function item$.take cannot be found, resulting in a TypeError: "item$.take is not a function"

Component library's Angular 7 Package dependencies

Mastering the Rejection of Promises in Javascript with Graceful Elegance

Ways to showcase my select/option in Angular 14?

What methods can be used to avoid getting distracted by input?

What is the method to cancel an Observable subscription without having a reference to the object of type "Subscription"?

Utilizing Angular to convert a string array into an array of enum values through an HTTP GET request

unable to retrieve information from the redis cache

Tips for effectively handling the data received from a webservice when logging into a system

Checking that an object's keys are all present in an array in TypeScript should be a top priority

Learn the process of generating an ID and dynamically updating its content using Angular

Solve TypeScript React error TS(2339) by resolving issues with extending a React.FC and using static property of type JSX.Element for uninitialized components

What is the process for declaring a member variable as an extended type in TypeScript?

Organize information by time intervals using JavaScript

When sending a POST request in Angular and Node.js, the req.body object is found to be empty {}

What is the best way to manage error handling in various locations within an Angular stream?

Changing the default font size has no effect on ChartJS

Tips for preserving data in Angular form fields

In React, the state's value will revert back to its initialState whenever a new value is assigned

Acquiring the Auth0 authentication token