take(1) vs first()

by

Operators first() and take(1) aren’t the same.

The first() operator takes an optional predicate function and emits an error notification when no value matched when the source completed.

For example this will emit an error:

import { EMPTY, range } from 'rxjs';
import { first, take } from 'rxjs/operators';

EMPTY.pipe(
  first(),
).subscribe(console.log, err => console.log('Error', err));

… as well as this:

range(1, 5).pipe(
  first(val => val > 6),
).subscribe(console.log, err => console.log('Error', err));

While this will match the first value emitted:

range(1, 5).pipe(
  first(),
).subscribe(console.log, err => console.log('Error', err));

On the other hand take(1) just takes the first value and completes. No further logic is involved.

range(1, 5).pipe(
  take(1),
).subscribe(console.log, err => console.log('Error', err));

Then with empty source Observable it won’t emit any error:

EMPTY.pipe(
  take(1),
).subscribe(console.log, err => console.log('Error', err));

Jan 2019: Updated for RxJS 6

More Related Contents:

  1. Best way to import Observable from rxjs
  2. How to make nested Observable calls in Angular2
  3. What is the difference between Promises and Observables?
  4. Angular HTTP GET with TypeScript error http.get(…).map is not a function in [null]
  5. Avoiding nesting subscriptions in Angular 2+?
  6. Observable type error: cannot read property of undefined
  7. RxJS: takeUntil() Angular component’s ngOnDestroy()
  8. Angular Subscribe within Subscribe
  9. Passing Data with Subjects and Proxies
  10. How to create an RXjs RetryWhen with delay and limit on tries
  11. How to cancel/unsubscribe all pending HTTP requests in Angular 4+
  12. Testing error case with observables in services
  13. How to make a sequence of http requests in Angular 6 using RxJS
  14. Angular subscribe elegant
  15. TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable
  16. Behaviour subject initial value null?
  17. fromPromise does not exist on type Observable
  18. Rxjs Retry with Delay function
  19. tap() isn’t triggered in RXJS Pipe
  20. How to correctly import operators from the `rxjs` package
  21. Subscribing to a nested Observable
  22. What is pipe for in RxJS?
  23. How to throw error from RxJS map operator (angular)
  24. How to return observable from subscribe
  25. Property ‘toPromise’ does not exist on type ‘Observable’
  26. How to receive blob responses using Angular’s 2+ @angular/http module?
  27. Angular 5 to 6 Upgrade: Property ‘map’ does not exist on type Observable
  28. Angular2 watch for 302 redirect when fetching resource
  29. FormControl.detectchanges – why use distinctUntilChanged?
  30. How to pass results between chained observables

Leave a Comment