Home > front end >  How to add a log to the start and end of the Observable
How to add a log to the start and end of the Observable

Time:12-11

I need to perform some actions at the beginning and at the end.

expect: Print a start log, wait 3000ms, and then print 'hello world!' and 'end'.

import { Observable, finalize, timer, map, } from 'rxjs'

const log = function <T>(o: Observable<T>): Observable<T> {
  // How to log at the beginning?

  // log at the end
  o = o.pipe(
    finalize(() => {
      console.log('end')
    })
  )

  return o
}

const o = timer(3000)
  .pipe(
    map(() => 'hello world!')
  )

log(o).subscribe((res) => {
  console.log(res)
})

CodePudding user response:

My understand is, you want to

  1. log 'start'
  2. run o (whatever was passed to log(o))
  3. log 'end'

I suggest the following, using tap, a higher order observable and finalize as you already did. The main trick here, is to start another pipe, that logs something before subscribing to o.

const log = <T>(o: Observable<T>): Observable<T> {
  of(o).pipe( // Creating a higher order observable here.
    tap(() => console.log('start')), // log start
    concatMap((o) => o), // run o
    finalize(() => console.log('end')) // log end,
  );

You don't need to use a higher order observable here, since o is available as function parameter.

const log = <T>(o: Observable<T>): Observable<T> {
  of(42).pipe( // Any value to start the pipe.
    tap(() => console.log('start')), // log start
    concatMap(() => o), // run o, from function parameter
    finalize(() => console.log('end')) // log end,
  );

No difference in function, just a matter of style, because I don't like passing useless values to of() just to start a pipe.

CodePudding user response:

It sounds like you want the opposite of finalize, which doesn't exist, but we can make it!

function initialize<T>(callback: () => void): MonoTypeOperatorFunction<T> { // same typing as finalize operator
  return (source) => concat(
    EMPTY.pipe(
      finalize(callback)
    ),
    source
  );
}

So now you can do something like

function logObservableStartAndEnd(o, msgStart, msgEnd) {
  return o.pipe(
    initialize(() => console.log(msgStart)),
    finalize(() => console.log(msgEnd))
  )
}

(Caveat: None of the above has been debugged.)

CodePudding user response:

I think you want to perform some action and then after sometime another action,

so you can use setTimeout(()=>{ ...................... },1000)

  • Related