Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

314
Views
¿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 answers
Answer question

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 Report

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 Report

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!