Cuando hago clic en el botón, estoy haciendo una solicitud http múltiple para el mismo servicio api. Si quiero esperarlos, estoy usando async await con promesas.
¡TENGA EN CUENTA QUE ESTA LLAMADA AL MÉTODO VUELVE OBSERVABLE!
this.getAuctionService.getAllAuctionsUsingPOST onButtonClick() { makeRequest(); makeRequest(); makeRequest(); makeRequest(); } makeRequest() { try { let response: any = this.getAuctionService.getAllAuctionsUsingPOST(params).toPromise() this.filterService.auctionTotalPages = response.totalPages; this.currentPage = response.currentPage; this.remapLazyLoadedData(response, cb); } catch (error) { this.toastr.error(error.error.description, error.error.error); } }entonces, cuando hago clic en el botón, se producen cuatro solicitudes http en paralelo y eso significa que a veces la respuesta de la solicitud httpRequest número 3 puede llegar antes que la primera, incluso si se llamó más tarde.
Debido a este problema, ahora estoy usando async await con promesas.
onButtonClick() { await makeRequest(); await makeRequest(); await makeRequest(); await makeRequest(); } async makeRequest() { try { let response: any = await this.getAuctionService.getAllAuctionsUsingPOST(params).toPromise() ... } catch (error) { this.toastr.error(error.error.description, error.error.error); } }ahora estoy esperando cada llamada y las respuestas de las llamadas serán siempre en el mismo orden en que fueron llamadas.
Pero no puedo encontrar una solución para esto con Observable - rxjs way
¿Cómo puedo esperar esta multiplicación de llamadas sin sincronización y esperar?
onButtonClick() { makeRequest(); makeRequest(); makeRequest(); makeRequest(); } makeRequest() { let response: any = this.getAuctionService.getAllAuctionsUsingPOST(params); .... } **what i tried** i tried with `.subscribe` but it does not work - every each call is not waiting for the previous oneNo estoy completamente seguro de dónde provienen los params , pero esto es lo que haría con RxJS.
private singleRequest$ = this.getAuctionService.getAllAuctionsUsingPOST(params).pipe( tap(response=>{ this.filterService.auctionTotalPages = response.totalPages; this.currentPage = response.currentPage; this.remapLazyLoadedData(response, cb); }), catchError(error=>{ this.toastr.error(error.error.description, error.error.error); return EMPTY; }) ) private multipleRequests$ = interval(1).pipe( takeUntil(i=>i===4), concatMap(_=>this.singleRequest$) ) public onButtonClick(){ this.multipleRequests$.subscribe(); } Primero, declaré un observable que llama a su método de servicio y aplica un nuevo estado usando el operador tap() .
A continuación, declaro un segundo observable de conteo que comienza con 0 . Cada cuenta de intervalo llamará al primer observable. El uso concatMap() garantiza que cada llamada a su método de servicio se realice en orden. Nuestro operador takeUntil() asegura que el observable se complete cuando nuestro contador llegue a cuatro.
Por lo tanto, su método de componente solo necesita suscribirse a multipleRequests$ para activar el evento. Dado que takeUntil() completa el observable, no necesita preocuparse por darse de baja.
Puede crear un solo observable que ejecute varios en secuencia usando concat :
const sequential$ = concat(obs1$, obs2$, obs3$); Entonces, si el método makeRequest() devolviera un observable, podrías hacer:
onButtonClick() { concat( makeRequest(), makeRequest(), makeRequest(), makeRequest() ) .subscribe(); } Entonces makeRequest podría verse así:
makeRequest() { return this.getAuctionService.getAllAuctionsUsingPOST().pipe( tap(response => { this.filterService.auctionTotalPages = response.totalPages; this.currentPage = response.currentPage; this.remapLazyLoadedData(response, cb); }), catchError(({error}) => { this.toastr.error(error.description, error.error); return EMPTY; }) ); }