Actualmente estoy cambiando de promesas a observables. Estoy usando Redux-Observable para mi aplicación de reacción. Básicamente, estoy buscando el mejor operador que habilite múltiples llamadas ajax simultáneas y devuelva las respuestas cuando todos los observables hayan terminado de ejecutarse con éxito. Aquí hay un fragmento de código de mi aplicación.
let epicPostAd = (action$, store, {ajax}) => action$.ofType(POST_AD) .debounceTime(1000) .mergeMap(({ payload }) => ajax(generateAjaxRequestSetting(POSTS_URL, 'post', payload,CT_JSON)) .map(response => postAdSuccessful(response)) .catch(e => Observable.of(postAdUnsuccessful(e.xhr.response))) .takeUntil(action$.ofType(LOCATION_CHANGE)) ) Es una simple solicitud de ajax que publica un anuncio dado y envía POST_AD_SUCCESSFUL cuando la respuesta es 201; de lo contrario, envía POST_AD_UNSUCCESSFUL por error. Pero el problema es que quiero hacer una transmisión observable ajax posterior cuando haya una respuesta. Como
.map(response => /* start a stream of ajax observables then process the response */)Le agradeceré que me muestre la forma óptima de lograrlo.
Parece que está buscando el operador forkJoin .
Se suscribirá a todos los Observables que le pases y después de que se completen, emitirá el último valor de cada uno dentro de una matriz.
No estaba del todo claro en qué parte de tu Epic querías hacer esto, así que hice un ejemplo genérico:
const somethingEpic = (action$, store, { ajax }) => action$.ofType(SOMETHING) .mergeMap(() => Observable.forkJoin( ajax('/first'), ajax('/second'), ajax('/third') ) .do(results => { // the results is an array, containing each const [first, second, third] = results; console.log(first, second, third); }) .map(results => ({ type: 'SOME_RESULTS', results })) ); Técnicamente, admite un argumento final resultSelector de resultado que puede usar en lugar de usar el operador de map después de él, pero tiendo a no usarlo porque descubrí que es menos claro con solo beneficios de rendimiento insignificantes en casos comunes de estilo observable de redux. Pero igual es bueno saberlo. Puede ser útil para más cosas de "normalización de datos" en lugar de cosas de "transformar esto en una acción".
const somethingEpic = (action$, store, { ajax }) => action$.ofType(SOMETHING) .mergeMap(() => Observable.forkJoin( ajax('/first'), ajax('/second'), ajax('/third'), results => ({ type: 'SOME_RESULTS', results }) ) );TAMBIÉN, si te estás preguntando "¿qué operador debo usar?" debe probar el asistente del operador que se encuentra en la documentación: http://reactivex.io/rxjs/
Desplácese hacia abajo hasta la parte que dice:
¿Necesita encontrar un operador para su problema? Comience eligiendo una opción de la lista a continuación:
- Tengo un Observable existente, y...
- Tengo algunos Observables para combinar juntos como un Observable, y...
- Todavía no tengo Observables, y...
Sugerencia: abra sus DevTools para experimentar con RxJS.
Aunque en este caso, forkJoin se sugiere correctamente, pero cuando hace clic en él, aún no está documentado: cara triste: pero una búsqueda en Google presentaría muchos sitios web diferentes que explican qué hace y cómo usarlo (en RxJS y en otros Rx implementaciones en otros lenguajes). Me gusta este sitio web útil
Aquí está la respuesta a mi propia pregunta. Aunque JayPhelps respondió, me di cuenta de que mi pregunta no era tan clara. Usando la recomendación de Jay. Se me ocurrió lo siguiente:
let epicPostAd = (action$, store, {ajax, observable}) => action$.ofType(POST_AD) .debounceTime(1000) .mergeMap(({ payload }) => ajax(generateAjaxRequestSetting(POSTS_URL, 'post', payload, CT_JSON)) .mergeMap(response => observable.forkJoin( ajax(''), ajax('') ) .do(res => { const [first, second, third] = results; console.log(first, second, third); }) .map(res => postAdSuccessful(res)) ) .catch(e => observable.of(postAdUnsuccessful(e.xhr.response))) .takeUntil(action$.ofType(LOCATION_CHANGE)))
Así que aquí cómo funciona. Hago una solicitud de publicación e inmediatamente después de que la solicitud de ajax finaliza la ejecución, .mergeMap la respuesta a una secuencia de ovservables de ajax usando .forkJoin() . Luego procesa los resultados.