Angular 2 + rxjs - how return stream of objects fetched with several subsequent http requests

Question

I have data classes

class Processor {
    frequency: number;
    error: booelan;
}

class Computer {
    name: string;
    processor: Processor[];
}
<         


        

Answer 1

This looks like a job for concatMap operator (btw, I had a very similar question some time ago How to use exhaustMap in ReactiveX/rxjs 5 in TypeScript).

For example running several request in order:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/concatMap';
import 'rxjs/add/operator/do';

var urls = [
  'https://httpbin.org/get?1',
  'https://httpbin.org/get?2',
  'https://httpbin.org/get?3',
  'https://httpbin.org/get?4',
  'https://httpbin.org/get?5',
];     

Observable.from(this.urls)
  .concatMap(url => http.get(url))
  .subscribe(response => console.log(response.url))
;

This prints to console:

https://httpbin.org/get?1
https://httpbin.org/get?2
https://httpbin.org/get?3
https://httpbin.org/get?4
https://httpbin.org/get?5

Operator concatMap() maps each value (each URL in our case) into an Observable and re-emits all its values until it's complete. Then it carries on with the next Observable returned from the callable. We know that http.get() returns an Observable that emits just one value with the Response object and then completes.

See plnkr demo: http://plnkr.co/edit/PJ7SpkNgBjZz2h4uvRpK?p=preview (in app.component.ts)

You said the request depend on each other (one request is dependent on the result of the previous request?) so maybe a better solution could be the following:

http.get('https://httpbin.org/get?1')
  .do(response => console.log('Process response', response.url))

  .concatMap(response => {
    console.log('Previous response', response.url, ' about to run /get?2')
    return http.get('https://httpbin.org/get?2')
  })
  .do(response => console.log('Process response', response.url))

  .concatMap(response => {
    console.log('Previous response', response.url, ' about to run /get?3')
    return http.get('https://httpbin.org/get?3')
  })

  .subscribe(response => console.log('Done', response.url))
;

Output in console:

Process response https://httpbin.org/get?1
Previous response https://httpbin.org/get?1  about to run /get?2
Process response https://httpbin.org/get?2
Previous response https://httpbin.org/get?2  about to run /get?3
Done https://httpbin.org/get?3

Again, we're using concatMap() to turn each value into an Observable but this time we're using it to only guarantee the correct order and to be able to access the result from the previous http.get() call. I also used do() operator only to separate logic that processes the previous response from logic that creates the next request for better readability (even though this could all go into concatMap()).

See plnkr demo: http://plnkr.co/edit/VFv09dTekK8av1Pu3a75?p=preview (in app.component.ts)