1

I am looking for a way to do some action after all controls on a page are loaded. These controls are loaded in parallel by calling http get.

I tried code similar to the one below but it doesn't seem to do the trick. If it worked correctly, the sometext should display 'done'. It doesn't. I am not sure I understand correctly how the forkJoin works. I used to do this kind of chaining in Angular 1.x using promises. Any help in understanding the problem and a solution is appreciated.

The solution I am looking for is similar to this question for Angular 1.x: Angular combining parallel and chained requests with $http.then() and $q.all()

Complete code is at http://plnkr.co/edit/xH6VJo

Source is src/dash.ts

This is Angular 5 and typescript. 

export class dash implements OnInit {
  sometext = 'Some text ...';
  private httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
  };
  constructor(private http: HttpClient) {}
  click_me(): void {
    this.sometext = '';
    forkJoin([
      of(this.first_()),
      of(this.second_())
      ]).subscribe(val => {
        this.sometext = 'done...';
      })
  }
  first_(): void {
    this.http.get<any>('data/sampledata.json',this.httpOptions).subscribe(val=> {
    this.sometext = val.items[0].value;
    });
  }
  second_(): void {
    this.http.get<item[]>('data/sampledata.json',this.httpOptions).subscribe(val=> {
    this.sometext = val.items[1].value;
    });
  }
}
S. Beliadsi
  • 43
  • 3
  • 10
  • Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) – Igor Feb 01 '18 at 19:18
  • @Igor Would you mind explaining how is this a duplicate of that question? – S. Beliadsi Feb 01 '18 at 19:32
  • The solution for that question is what I used to use in Angular 1.x. But with TypeScript and rxjs, I am not sure how to do it. – S. Beliadsi Feb 01 '18 at 19:39
  • There are also answers specific to angular (angular 2 and higher) that use the rxjs library. See: https://stackoverflow.com/a/25501002/1260204 – Igor Feb 01 '18 at 19:43
  • Promises are not supported by Typescript as indicated in that answer. What do you suggest? Thanks. – S. Beliadsi Feb 01 '18 at 19:56

1 Answers1

5

The main reason is because your first() and second() doesn't return an Observable. .forkJoin() can only take in an array of Observables, fire them in parallel, and then it has to wait for all observables to complete before it starts to emit the resultant values. The main reason your complete() handler never gets executed is because there is no Observables in the .forkJoin() in the first place, hence none of them can complete, and your .forkJoin() will never emit.

Here's what you should do. For first() and second(), have them return an observable. If you want to change the this.sometext when both of them executes, use the operator .do():

first_(): Observable<any> {
    this.http.get<any>('data/sampledata.json', this.httpOptions)
        .do(val => {
            this.sometext = val.items[0].value;
        });
}

second_(): Observable<any> {
    this.http.get<item[]>('data/sampledata.json', this.httpOptions)
        .do(val => {
            this.sometext = val.items[1].value;
        });
}

Now your click_me() should be working fine:

click_me(): void {
    this.sometext = '';
    forkJoin([
        of(this.first_()),
        of(this.second_())
    ]).subscribe(val => {
        this.sometext = 'done...';
    })
}

Note that since Observable.forkJoin() fires their requests in parallel, there is NO GUARANTEE that your first() will be executed before your second().

CozyAzure
  • 8,280
  • 7
  • 34
  • 52