Filter Events with RxJS Operators take, first, and skip
There are more operators in the filtering category besides filter(). This lesson will teach how take(), first(), and skip() are simply operators to ignore or pass a certain amount of events from the source Observable.
🚨 Since we are importing interval from RxJS, we don't need to preface our Observables with Rx.Observable. You can no longer .{operator}, you need to .pipe({operator}) instead.
[00:00] We just saw filter, which is in the category of filtering operators, which means there are several ways of ignoring events, not just with the filter operator. We're going to see next the operators take, first, and skip.
[00:16] We're going to go back to looking at this observable of numbers, but let's say this time I want to allow only the first five numbers and then stop. Interval is an infinite observable, and I really just want the first five numbers.
[00:32] It would be quite cumbersome to do that with filter, because then you would need to keep track of how many events were sent already and returned true or false accordingly. That's why we use take instead.
[00:43] Take allows us to specify a number here, which means how many events we want to take or pass. Then, after that, we're going to complete the observable.
[00:55] Here, we're just going to say five, and then the observable output at the bottom will have, at most, five events. After that, it just completes.
[01:07] Let's see how take works. We say take five. It will take only five events from this interval observable called foo. After that, it's going to complete. Every one second, it delivers a value. Once it hits four, it's done.
[01:23] There's a shortcut. It's quite common to do take one, which means take the first number and then stop. Take one is quite common, and that's why we have an operator that does exactly the same thing as take one. It's called first. What it does, it lets the first event pass, and then it completes. Like that.
[01:50] In the other case, let's say that we have this observable of numbers, and we want to ignore the first five numbers. Instead of passing them, we want to ignore them. That's the use case for skip, where we also specify a number of how many events should we ignore in the beginning.
[02:11] Let's say we want to ignore the first five. That means that it's going to ignore zero, one, two, three, and four. Then, after that, it starts passing five, six, and seven. I'm just going to make this interval be faster, otherwise we need to wait six seconds. Then, I'm going to call skip five.
[02:33] When we run this, we see five, six, seven, etc. This is an infinite observable.
[02:40] Just remember that you use take in order to ignore the rest after the fifth, or you use skip in order to ignore the first five.
Correct, Andrew. Thanks for pointing it out!
foo.first() and foo.take(1), are not equivalent, at least on an edge case.
If foo is an empty observable, foo.first() throws an EmptyError, while foo.skip(1) returns an observable equivalent to Observable.empty(). The former requires that you either provide a defaultIfEmpty or a .catch.