RX.JS Redux Observable Multiple Get requests at same time

user_2433617 0
Viewed 1593

I am trying to set up an observable that currently receives an array of location IDs and then makes a get request for all of these at once and waits for the response for them all. Here is a sample:

const fetchPhotosEpic = action$ =>
    action$.ofType(LOCATIONS_RECEIVED)
    .map(action => action.payload)
    .mergeMap((data) =>  {
        let promiseArray = data.map(location => Observable.fromPromise(axios.get(photosUrl(location.id))))
        return Observable.forkJoin(
           promiseArray
        )
    })
    .map(responses => responses.map((response) => response.data.location))

Where data looks like:

[
    {
        id: "aoeuaeu",
        name: "Test"
    },
  ...
]

The issue I have right now is I get a 404 on one of the requests and it's messing everything up. I am probably doing something wrong as I am just learning RX. Any help would be great!

rxjs5 rxjs redux-observable javascript
1 Answers

You can try adding a catch to each call and returning a new observable with the error message, which should stop the forkJoin failing if one request fails. You can then either filter out the failures, or add logic to handle them in your final .map. eg.

const fetchPhotosEpic = action$ =>
    action$.ofType(LOCATIONS_RECEIVED)
    .map(action => action.payload)
    .mergeMap((data) => {
        let promiseArray = data.map(location => {
            return Observable.fromPromise(axios.get(photosUrl(location.id)))
                .catch(error => Observable.of({error}))
      })
      return Observable.forkJoin(
          promiseArray
      )
  })
 .filter(response => !Boolean(response.error))
 .map(responses => responses.map((response) => response.data.location))
user_29509690
Related