Baffled! Observables

[kenlnetherland]

Why does the following code work (tap.. next callback):

`
intercept(req: HttpRequest, next: HttpHandler): Observable<HttpEvent> {

let ok: string;
let started = Date.now();

let observable = next.handle(req).pipe(
  tap({
    // Succeeds when there is a response; ignore other events
    next: (event) => {

      if (event instanceof HttpResponse) {
        ok = event.statusText;
      }
    },
    // Operation failed; error is an HttpErrorResponse
    error: (_error) => {
      ok = 'failed'
    }
  }),
  // Log when response observable either completes or errors
  finalize(() => {
    const elapsed = Date.now() - started;
    const msg = `${req.method} "${req.urlWithParams}"
      ${ok} in ${elapsed} ms.`;
  })
);

return observable;

}`

But this does not:

`
intercept(req: HttpRequest, next: HttpHandler): Observable<HttpEvent> {

let ok: string;
let started = Date.now();
let observable = next.handle(req);

observable.pipe(
  tap({
    // Succeeds when there is a response; ignore other events
    next: (event) => {

      if (event instanceof HttpResponse) {
        ok = event.statusText;
      }
    },
    // Operation failed; error is an HttpErrorResponse
    error: (_error) => {
      ok = 'failed'
    }
  }),
  // Log when response observable either completes or errors
  finalize(() => {
    const elapsed = Date.now() - started;
    const msg = `${req.method} "${req.urlWithParams}"
      ${ok} in ${elapsed} ms.`;
  })
);

return observable;

}`

[zireael-0]

Because in the second block you create a new Observable with .pipe but never do anything with it. It's just dropped.

[samal-rasmussen]

You need to store the result of the .pipe call somewhere so you can use it later. E.g. observable = observable.pipe(.... Right now it just disappears into the ether.