Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

309
Vistas
¿Escucha angular en el inicio de la suscripción de rxjs observable?

¿Hay alguna forma de detectar el inicio de la suscripción de un rxjs observable dentro de la tubería?

Quiero activar un indicador de carga cuando se suscriba un http observable (destruido cuando se haya finalizado la respuesta).

¿O tengo que crear un contenedor observable para esta acción?

over 4 years ago · Santiago Trujillo
3 Respuestas
Responde la pregunta

0

Depende de la versión de RxJS que esté utilizando. Con RxJS <7.3 puedes usar defer() :

 defer(() => { loadingFlag = true; return this.http.doyourrequest().pipe( finalize(() => loadingFlag = false), ); });

Desde RxJS >= 7.3, puede usar nuevos controladores de eventos para tap() :

 this.http.doyourrequest().pipe( tap({ subscribe: () => loadingFlag = true, finalize: () => loadingFlag = false, }), );
over 4 years ago · Santiago Trujillo Denunciar

0

dado que cada suscripción a http observable provoca una nueva llamada http, es seguro establecer dicha bandera fuera de la canalización, al menos así es como lo hago.

 getSomeData(){ loadingFlag=true; return this.http.doyourrequest().pipe(finalize(()=>loadingFlag=false)); }

si realmente desea pasar por el subconteo (que siempre llega a 0 después de cada solicitud debido a la finalización de http obs), verifique la implementación de los operadores refCount() y share() que cuentan internamente a los suscriptores

Editar:

Puede encapsular la configuración de la bandera utilizando un observable ficticio como punto de entrada, por ejemplo

 getSomeData(){ return of(null).pipe( tap(()=>loadingFlag=true), switchMapTo(this.http.doyourrequest()), finalize(()=>loadingFlag=false) ) }
over 4 years ago · Santiago Trujillo Denunciar

0

En lugar de establecer algún indicador como efecto secundario en su transmisión, intente crear un observable que devuelva el estado de su solicitud.

 readonly makeRequestSubject = new Subject<RequestParams>(); readonly request$ = makeRequestSubject.pipe( switchMap(params => this.doRequest(params).pipe( map(result => ({ params, result, state: 'complete' })), catchError(error => ({ error, params, state: 'error' })) startWith({ params, state: 'loading' }) ), startWith({ state: 'notstarted' }), shareReplay(1) ); readonly isLoading$ = this.request.pipe(map(x => x === 'loading'), distinctUntilChanged()); readonly results$ = this.request.pipe(map(x => x === 'complete' ? x.results : []));
  1. Podría devolver un observable de un método y usarlo como una promesa con sobrepeso, o podría tener un solo campo que contenga la transmisión, y todos los dependientes podrían simplemente suscribirse y cancelar su suscripción cuando lo deseen. Se llama a next() en makeRequestSubject cada vez que necesita realizar una nueva solicitud.
  2. El startWith exterior debe emitir primero. Esto es opcional, pero puede ser útil en algunos escenarios de interfaz de usuario, como mostrar un mensaje con instrucciones si no se han realizado solicitudes.
  3. La solicitud se inicia en un switchMap , por lo que las llamadas sucesivas interrumpirán las anteriores si aún no están completas.
  4. El operador startWith interno emitirá primero a menos que la solicitud sea instantánea.
  5. catchError ilustra otro caso de uso típico más allá de la configuración de un indicador de carga.
  6. Puede suscribirse a request$ directamente o usar isLoading$ y results$**. Por lo general, trato de evitar la creación de observables adicionales y solo me aseguro de que el modelo en mi componente en una secuencia maestra coincida con mis enlaces de interfaz de usuario.
  7. Los parámetros solo se incluyeron porque podrían ser útiles en la interfaz de usuario.
over 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda