How to perform multiple HTTP requests from an array using RXJS?

Question

Currently, I'm developing a sync service with Angular. Here I'm doing a database request and get back an array of URLs. Now I want to process each URL in sequence. Here is my code so far:

    return this.http.get<any[]>(url + '/recovery').pipe(
        map((response: any) => {

            return from(response).pipe(
                concatMap((item: any) => {

                    switch (item.method) {
                        case 'POST':
                            return this.post(item.url, item.data);
                        case 'PUT':
                            return this.update(item.url, item.data);
                        case 'DELETE':
                            return this.delete(item.url);
                    }
                })
            );
        })

The returned array of the initial HTTP request looks something like this:

[
    {method: 'POST', url: 'xxx.com/aaa', data: {...}},
    {method: 'POST', url: 'xxx.com/bbb', data: {...}},
    {method: 'PUT', url: 'xxx.com/ccc'},
]

In the next step I do a subscription like:

this.restService.syncRecovery().subscribe(response => {
    console.log('SYNC DONE', response);
});

The subscription works, but the "inner" http requests (concatMap) wont be processed. I expect that this will be a simple problem, but I can't find it and hope that somebody here can give some support, please.

Thx!

Barremian · Accepted Answer · 2020-06-18 13:34:03Z

1

Everything looks fine except you need to use switchMap instead of map as the parent mapping operator.

return this.http.get <any[]> (url + '/recovery').pipe(
  switchMap((response: any) => {            // <-- `switchMap` here
    return from(response).pipe(
      concatMap((item: any) => {
        switch (item.method) {
          case 'POST':
            return this.post(item.url, item.data);
          case 'PUT':
            return this.update(item.url, item.data);
          case 'DELETE':
            return this.delete(item.url);
        }
      })
    );
  })
);

And I assume this.post, this.update, and this.delete are wrappers for HTTP requests.

edited Jun 18, 2020 at 13:34

answered Jun 18, 2020 at 13:22

Barremian

31.2k4 gold badges37 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Picci Over a year ago

You may find interesting this article with some common patterns to apply when using RxJS and http

Collectives™ on Stack Overflow

How to perform multiple HTTP requests from an array using RXJS?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related