CODEWITHSUNDEEP
angularhttprxjs
Ka Tech
Ka Tech

Reputation: 9457

Angular - Sequencing Multiple HTTP Requests

In my angular 7 project as part of my component initialisation I am running a sequence of HTTP request. After each request I get the response and then run then next request.

Currently I have put the HTTP request in a service and call them from my component. My HTTP request functions have additional RXJS functions applied including timeout and repeating request via the .pipe function. Error handling is done in the component.

To chain, after one request is complete I then call the next request in another function. I will need the response data of the first request to execute the next responses.

The issue is the current way I have chained just looks really messy and hard to follow.

Is there are a better way to chain HTTP requests?

I know there is a rxjs fork function but a bit confused on how to implement this especially when I have the error handling and pipes.

Note: Errors are handled the same way for requests.

Full code below and thanks in advance.

Component
formData: any;
style: any;
subscribers:any[];

constructor(private webService: WebService){}

ngOnInit(){
 let id: number = 1;
 this.getFormData(id);

}

getFormData(id: number) {
 this.webService.getFormData(id)
 .subscribe(
   data => { 
     this.formData = data;
     this.getFormStyle(this.formData.style_id);

   },
     err => {
      // Error handler
     }
  )
}

getFormStyle(id: number) {
 this.webService.getFormStyle(id)
 .subscribe(
   data => { 
     this.style = data;
     this.getFormSubscribers(this.formData.subscriber_id);

   },
     err => {
      // Error handler
     }
  )
}

getFormSubscribers(id: number) {
 this.webService.getFormSubscribers(id)
 .subscribe(
   data => { 
     this.subscribers = data;
   },
     err => {
      // Error handler
     }
  )
}

WebService

Form Data API

getFormData(id: number): any {
 let headers: any = this.headerService.getHeaders();
 return this.http.get('www.test.com/form/data/' + id, {headers: headers})
    .pipe(timeout(25000))
    .pipe(retryWhen(errors => errors
      .pipe(map((err, index) => {
        // No Error, throw immediately
        if (!err) {
          throw err;
        } 
        // Caught error (ie not disconnected), throw immediately
        if (err.status !== 0) {
          throw err;
        }
        // Disconnection repeat to limit
        if (index === 2) {
          throw err;
        }
        return err;
      }))
      .pipe(delay(2000))))
    .pipe(map(res => res.json()))
}

Form Style API

getFormStyle(style_id:number) {
     let headers: any = this.headerService.getHeaders();
     return this.http.get('www.test.com/form/style/' + style_id, {headers: headers})
        .pipe(timeout(25000))
        .pipe(retryWhen(errors => errors
          .pipe(map((err, index) => {
            // No Error, throw immediately
            if (!err) {
              throw err;
            } 
            // Caught error (ie not disconnected), throw immediately
            if (err.status !== 0) {
              throw err;
            }
            // Disconnection repeat to limit
            if (index === 2) {
              throw err;
            }
            return err;
          }))
          .pipe(delay(2000))))
        .pipe(map(res => res.json()))

}

Form Subscribers API

getFormSubscribers(subscriber_id:number) {
     let headers: any = this.headerService.getHeaders();
     return this.http.get('www.test.com/form/subscribers/' + subscriber_id, {headers: headers})
        .pipe(timeout(25000))
        .pipe(retryWhen(errors => errors
          .pipe(map((err, index) => {
            // No Error, throw immediately
            if (!err) {
              throw err;
            } 
            // Caught error (ie not disconnected), throw immediately
            if (err.status !== 0) {
              throw err;
            }
            // Disconnection repeat to limit
            if (index === 2) {
              throw err;
            }
            return err;
          }))
          .pipe(delay(2000))))
        .pipe(map(res => res.json()))

}

Upvotes: 3

Views: 658

Answers (1)

Yash Rami
Yash Rami

Reputation: 2327

you can try async await to sequence the api call. 

Component
formData: any;
style: any;
subscribers:any[];

constructor(private webService: WebService){}

ngOnInit(){
 let id: number = 1;
 this.getFormData(id);

}

async getFormData(id: number) {
 this.webService.getFormData(id)
 .subscribe(
   data => { 
     this.formData = data;
     console.log('start');
     await this.getFormStyle(this.formData.style_id);
     await this.getFormSubscribers(this.formData.subscriber_id);
     console.log('end'); // this line will compile once all the await function compilation will completed.
   },
     err => {
      // Error handler
     }
  )
}

getFormStyle(id: number) {
 return new Promise ((resove, reject) => {
    this.webService.getFormStyle(id)
    .subscribe(
     data => { 
       this.style = data;
       resolve(''); // if you want to pass the data you can pass that data in to resolve 
     },
     err => {
      // Error handler
     }
  )
 })
}

getFormSubscribers(id: number) {
 return new Promise ((resolve, reject) => { this.webService.getFormSubscribers(id)
 .subscribe(
   data => { 
     this.subscribers = data;
     resolve(''); // if you want to pass the data you can pass that data in to resolve 
   },
     err => {
      // Error handler
     }
  ))
}

I hope it helps you out.

Upvotes: 1

Related Questions