RxJS subscribeOn() Utility Operator

RxJS subscribeOn() operator is a utility operator used to specify the scheduler on which the source observable will operate.

In other words, we can say that the RxJS subscribeOn() operator helps us to subscribe to the source observable asynchronously according to the scheduler taken as input.

By using RxJS subscribeOn() operator, we can decide what type of scheduler a specific observable will be using when it is subscribed to. Schedulers are used to control the speed and order of emissions to observers from an observable stream.

Syntax:

Following is the syntax of the RxJS subscribeOn() utility operator:

<p>subscribeOn<T>(scheduler: SchedulerLike, delay: number = 0): MonoTypeOperatorFunction<T></p>

Parameter Explanation

scheduler: The scheduler argument is used as an input that helps to re-emit the notifications from the source observable and to perform subscription actions.
delay: It is an optional argument. Its default value is 0. Type: number.

Return value

The RxJS subscribeOn() operator's return value is an observable same as source observable, but with scheduler param. It is modified in such a way that its subscriptions happen on the specified SchedulerLike.

Let us see an example of the RxJS subscribeOn() operator to understand it clearly. First, see a merging example without using the subscribeOn operator.

Example 1 (Without using subscribeOn)

import { of, merge, asyncScheduler } from 'rxjs';
let test1 = of(1, 2, 3, 4, 5);
let test2 = of(6, 7, 8, 9, 10);
let sub1 = merge(test1, test2).subscribe(console.log);

Output:

After executing the above example, you will see the following result:

Here, you can see that both observable test1 and test2 are emitting their values directly and synchronously once they are subscribed to. We get the result in the form of output as 1 2 3 4 5 6 7 8 9 10.

Now, let's use the RxJS subscribeOn operator declaring the values and merging them.

Example 2 (By using subscribeOn)

import { of, merge, asyncScheduler } from 'rxjs';
import { subscribeOn } from 'rxjs/operators';
let test1 = of(1, 2, 3, 4, 5).pipe(subscribeOn(asyncScheduler));
let test2 = of(6, 7, 8, 9, 10);
let sub1 = merge(test1, test2).subscribe(console.log);

Output:

After executing the above example, you will see the following result:

In the above example, you can see that the output is changed to 6 7 8 9 10 1 2 3 4 5. This is because the observable test2 emits its values directly and synchronously like the first example. But the test2 observable emissions are scheduled on the event loop because we are now using the async for that specific observable.

Next TopicRxJS Operators

← prev next →