Patience is key when handling multiple Observables in Angular 5

Question

Patience is key when handling multiple Observables in Angular 5

Having recently started working with Angular and TypeScript, my question may seem a bit off. I'm currently using Visual Studio Code along with Angular 5 (ng-version="5.2.11").

I am faced with the challenge of waiting for my API call to finish and return its result without having to wrap everything in a huge ".subscribe" block. Here is what I have:

exampleMethod(): SettingsClass {
const myComplexObject: SettingsClass = {
  field1: predefined.field1,
  field2: predefined.field2,
  field3: isComplexCalculationsNecessary ? this.CallApi_1(predefined.paramForField3) : predefined.field3,
};

return myComplexObject;
}

Previously, all parameters were in "predefined", but now I need to fetch one(or more) from an external source and immediately return "myComplexObject" from the method without delay. How can I write the API call to avoid rewriting my code every time I need to add a new external call? Something like:

CallApi_1(paramForField3: string): Observable<int> {
return this.http.get(`${httpConfig.route}?$apply=filter${paramForField3}/groupby${httpConfig.groupingParam}`);
}

OR maybe

CallApi_1(paramForField3: string): Observable<int> {
return this.ExternalCallsService.GetParam3Information(paramForField3).subscribe(res => 
.GetParam3Information contains the same http call as above, but I need to do
something to return this result outside, I don't know what);
}

What I'm looking for is something like:

field3: isComplexCalculationsNecessary ? **await** this.CallApi(predefined.paramForField3) : predefined.field3,

Currently I am experimenting with 'rxjs' which offers interesting options for working with Observables, such as 'forkJoin', but I am not sure if I am on the right track. Maybe this kind of trick is not possible, or perhaps my understanding of Observables is incorrect and I should move complex logic to the back-end instead? Please advise.

It's important to emphasize once again that a simple ".subscribe" is not what I'm after because in all subscribe examples, values are not returned but assigned to global variables or directly to HTML elements, which is NOT what I require. I need to retrieve the value and continue working with it as soon as the external resource returns it.

angular typescript async-await angular5 observable

Answer 1

Answer №1

If you want to see an example using rxjs/concat, check out this demo: https://example.com/rxjs-concat-demo

This code snippet demonstrates how you can execute functions in sequence, where each function returns an Observable:

let executionSequence = concat([
      this.first, 
      this.second, 
      this.afterSecond, 
      this.third]);

    executionSequence.subscribe(func => {
      func().subscribe(val => {
        this.results.push(val);
      })
    });

Answer 2

If you want to see an example using rxjs/concat, check out this demo: https://example.com/rxjs-concat-demo

This code snippet demonstrates how you can execute functions in sequence, where each function returns an Observable:

let executionSequence = concat([
      this.first, 
      this.second, 
      this.afterSecond, 
      this.third]);

    executionSequence.subscribe(func => {
      func().subscribe(val => {
        this.results.push(val);
      })
    });

Answer 3

Answer №2

If you want to handle multiple HTTP calls in Angular, you have a few options. You can utilize operators such as zip or forkjoin (similar but not the same), or you can chain your HTTP calls together like this:

this.http.get1( url1, headers ).subscribe(
   data => {
      this.data1 = data;
      this.http.get2( url2, headers ).subscribe(
         data => {
            this.data2 = data;
         },
         error2{
            // deal with error2
         }
      )
   },
   error1 => {
      // handle error1
   }
)

While this approach may work fine, it's not the most elegant solution. I personally recall using the zip operator to solve a similar problem.

Edit : I found an example using the zip operator

     const  tpcomprob$ = this.data.getTPComprob( this.tpcomprobsId);
     const  comprobs$ = this.data.getComprobs(this.tpcomprobsId); 

     this.sbsComprobs = zip(tpcomprob$, comprobs$, (tpcomprob: any, comprobs: any) => ({tpcomprob, comprobs}))
                       .subscribe(pair => {
                          this.tpcomprob = pair.tpcomprob;
                          this.comprobs = pair.comprobs;

        },
        error => {this.httpError = error ;})
  });

Answer 4

If you want to handle multiple HTTP calls in Angular, you have a few options. You can utilize operators such as zip or forkjoin (similar but not the same), or you can chain your HTTP calls together like this:

this.http.get1( url1, headers ).subscribe(
   data => {
      this.data1 = data;
      this.http.get2( url2, headers ).subscribe(
         data => {
            this.data2 = data;
         },
         error2{
            // deal with error2
         }
      )
   },
   error1 => {
      // handle error1
   }
)

While this approach may work fine, it's not the most elegant solution. I personally recall using the zip operator to solve a similar problem.

Edit : I found an example using the zip operator

     const  tpcomprob$ = this.data.getTPComprob( this.tpcomprobsId);
     const  comprobs$ = this.data.getComprobs(this.tpcomprobsId); 

     this.sbsComprobs = zip(tpcomprob$, comprobs$, (tpcomprob: any, comprobs: any) => ({tpcomprob, comprobs}))
                       .subscribe(pair => {
                          this.tpcomprob = pair.tpcomprob;
                          this.comprobs = pair.comprobs;

        },
        error => {this.httpError = error ;})
  });

Answer 5

Answer №3

Using forkJoin makes the process simple.

var _array = [];

_array.push(this.myService.method1());
_array.push(this.myService.method2());

forkJoin(_array).subscribe(resultList=>{
    //-- the results will be stored in an array
});

Answer 6

Using forkJoin makes the process simple.

var _array = [];

_array.push(this.myService.method1());
_array.push(this.myService.method2());

forkJoin(_array).subscribe(resultList=>{
    //-- the results will be stored in an array
});

Patience is key when handling multiple Observables in Angular 5

Answer №1

Answer №2

Answer №3

Similar questions

Are there any outcomes from using Angular in conjunction with httpService for POST and DELETE requests?

Resolving Typescript jQuery AJAX Navigation Problem

Issue encountered in Angular 2 rc.5 where the page fails to refresh after upgrading from rc.4

Guide on populating text boxes in a form automatically using ngFor?

Creating a file logging system with log4js to capture Console logs

Retrieving 'this' within the catch clause following the execution of a promise

The ng-template directive does not duplicate data, whereas HTML elements have the ability to showcase it

Storing and retrieving information in ag-grid using Angular

Angular configuration for intercepting HTTP errors with RxJS Replay Subject

Unable to perform real-time transpilation of ES module, a loader plugin must be set up through the SystemJS.config configuration

Ionic 5 Virtual scroll leaves gaps where new items should be added

Uh oh! We encountered an error: Uncaught (in promise): Error: No routes found for the provided URL segment

Demystifying the Mechanics of RxJS Subscriptions during an HTTP Request

What are the best practices for testing a class function that executes a mongoose query?

Defining assertions with specified type criteria

Display a React element inside an array

Getting the value of an injected variable in a Vue.js computed method

Ways to prevent encountering an npm error during the installation of a new package in an Angular application

Recursively transform JSON tree node elements into a single, cohesive JSON format

Is it practical to utilize Angular and NestJS within a monorepository structure?