CODEWITHSUNDEEP
javascriptangularrxjs
Mohsen
Mohsen

Reputation: 812

RxJS takeLast function Stops Everything

When I use pipe and takeLast, then the whole process stops.

Here is my original code:

this.request$.subscribe(req => {
  this._service.run(req!).subscribe(res => {
    this._service.fetch().subscribe(resources => {
      console.log('hi'); // This 'hi' logs two times, but I want to get only the last 'hi'.
    });
  });
});

Here is my try:

this.request$.subscribe(req => {
  this._service.run(req!).subscribe(res => {
    this._service
      .fetch()
      .pipe(takeLast(1))
      .subscribe({
        next: x => console.log('got value ' + x),
        error: err => console.error('something wrong occurred: ' + err),
        complete: () => console.log('hi')
      });
  });
});

However, nothing happends in my try and nothing is logged anymore.

Updated my question

I have updated my second example as below, but not working yet:

this.request$.pipe(
  mergeMap((req) => this._service.run(req!)),
  mergeMap((res) => this._service.fetch().pipe(takeLast(1)))
).subscribe((resources) => {
  console.log('hi'); // This line is not executed, but I expect to be executed one time.
});

Upvotes: 1

Views: 1283

Answers (1)

dota2pro
dota2pro

Reputation: 7856

As mentioned in the post I commented you need to complete() observable so that Rxjs knows which is the last one, See Stackblitz

import { Component, Input, OnInit } from '@angular/core';
import { from, Observable, Subject } from 'rxjs';
import { last, takeLast, takeUntil } from 'rxjs/operators';

@Component({
  selector: 'hello',
  template: `
    <h1>Hello {{ name }}!</h1>
  `
})
export class HelloComponent implements OnInit {
  @Input() name: string;
  request$ = new Observable<any>();
  end$ = new Subject();
  ngOnInit() {
    this.request$ = from([1, 2, 3, 4, 5]); // create Observable
    this.request$
      .pipe(
        // mergeMap((req) => this._service.runRequest(req!)),
        // mergeMap((res) => this._service.fetchResources().pipe
        takeLast(1),
        takeUntil(this.end$)
      )
      .subscribe(resources => {
        console.log('hi'); // This line is not executed, but I expect to be executed one time.
      });

    this.end$.complete(); // Finish Subject to end subscription
  }
}

Upvotes: 2

Related Questions