How to retrieve paginated HTTP requests from a backend API using Observables in Angular4

Question

I've got a service in an angular 4 app that is retrieving a variable number of pages from a back-end API.

I've looked at the answer here Angular 2 - Chaining http requests, which suggests using a flatMap, but this approach does not work since it requires that all requests are known beforehand. This wont work in my case since the number of requests and the url of each request is dynamic and not known.

The number of pages/requests is inferred from the result of the previous request. So if the previous request returns anything the next page is requested to see if there are any more items.

I tried the following

this.items = [];
_fetch(url, page) {
    this.http.get(`${url}&pageSize=2&page=${page}`).subscribe(response => {
    this.items.concat(response.json().items)
    // if the list of items is not empty fetch another page
    if (response.json().items.length > 0) {
      this._fetch(url, ++page);
    }
  });
  return Observable.of(this.items);
}

However this.items is returned before the requests have a chance to complete so it is always returned as an empty list.

any ideas?

Look at this: https://stackoverflow.com/questions/40529232/angular-2-http-observables-and-recursive-requests — Surender Khairwa, Oct 04 '17 at 20:07
the answer linked as duplicate does not solve this problem. the question is not a duplicate — Ben Glasser, Nov 26 '17 at 00:51

LLai · Accepted Answer · 2017-10-04T20:15:25.263

You can use flatMap to chain the observables together

fetch(url){
    return this.http.get(`${url}/initial-api/`)
        .flatMap(res => {
            let page = res.page

            return this.get(`${url}&pageSize=2&page=${page}`);
        });
}

Now when you subscribe to the observable sequence, it'll chain the apis together

Here is a good read on flatMap/mergeMap: https://coryrylan.com/blog/angular-multiple-http-requests-with-rxjs

What is nice about flatMap is it keeps things in a single stream, as opposed to nested subscriptions which can get pretty messy depending on your code.

mwilson · Answer 2 · 2017-10-04T20:09:54.573

0

Since .subscribe returns an observable, you can simply chain them. As long as there was no error, it'll execute the second one:

this.http.get('some url').subscribe( result => {
    if (result) {
        // good to go execute second call.
        this.http.get('other url').subscribe( result2 => {
            // do something with result 1 and result 2
        })
    } else {
        // handle error. don't execute second call
    }
}, error => {
    // error occured. don't execute second call
})

You could also just setup promises in your app like so:

firstHttpCall() {
    return new Promise( (resolve, reject) => {
        this.http.get('someurl').subscribe( result => {
            result(result);
        }, error => {
            reject(error);
        });
    });
}
secondHttpCall() {
    return new Promise( (resolve, reject) => {
        this.firstHttpCall().then( result => {
            resolve(result);
        }, error => {
            reject(error);
        });
    });
}
someOtherCall() {
    // some stuff...
    this.secondHttpCall().then( result => {
        // everything went well.
    }, error => {
        // something went wrong
    })
}

If you could get to the point where you weren't dependent on the first calls value being used in the second call, I would say Promise.all is a viable option as well.

edited Oct 04 '17 at 20:09

answered Oct 04 '17 at 20:02

mwilson

12,295
7
55
95

how can I chain them when I don't know whether or not I'll have to make another request until the first one completes? – Ben Glasser Oct 04 '17 at 20:09
I can never get to that point because I have no way of knowing what the back end will return beforehand. – Ben Glasser Oct 04 '17 at 20:10
2

Avoid chaining use flatmap: https://stackoverflow.com/a/34107312/2015408 – Surender Khairwa Oct 04 '17 at 20:10
Because you know it's complete is the promise is resolved. If it's not resolved, then it's been rejected and therefore you know now to call it. – mwilson Oct 04 '17 at 20:10
@SurenderKherwa +1. Didn't know about flatMap – mwilson Oct 04 '17 at 20:11

How to retrieve paginated HTTP requests from a backend API using Observables in Angular4

2 Answers2