Control Flow when using .pipe() and .subscribe() in Angular - TagMerge
1Control Flow when using .pipe() and .subscribe() in AngularControl Flow when using .pipe() and .subscribe() in Angular

Control Flow when using .pipe() and .subscribe() in Angular

Asked 1 years ago
5
1 answers

The flow is made clear when you understand the meaning of pipe. It does what it says, it pipes in something in between the value emitted by the source and the subscription.

source --->     modify results by       ---> subscription
               piping in operators

Question 1

click  --->  map (convert) click event     --->   console.log(x)
event        to string "Testing MapTo"

Question 2

   Http     --->  go forward only if   --->   map (convert)     ---> console.log(x)
observable        number is even            result = 2 * result

Update (Cold Observable)

When a cold observable is subscribed to (eg. positions.subscribe(x...), the subscribe method of the Observable class is called. After that the callback functions go into hiatus mode and wait for the observable to emit. This is key here. The subscription triggers the sequence of statements in an observable to action, but it does not know when the observable will emit. This is why the observable is called push method of obtaining a value. The observable pushes the output when it is ready.

Once the subscribe function in the observable class is triggered, the pipe function comes into play. Because remember the observable isn't directly subscribed to. It is someObs.pipe(...).subscribe(). It is akin to the statement someData.getSum().getAverage(). The result of getSum() function applied to someData would be the input for the getAverage() function. In the same way, the operators in the pipe will be applied to the source observable which will return a new modified observable. And the subscription waits over this observable.

Informal example

Ordering a pizza scenario

+----------------------------------+---------------------------------------+
|          Ordering pizza          |       Subscribing to observable       |
+----------------------------------+---------------------------------------+
| Place order                      | Subscribe to observable               |
| Kitchen worker starts processing | The observable starts processing      |
| No onions                        | Filter some values                    |
| Double chesse                    | Map the values to return (2 * values) |
| Some other toppings              | Some other operators                  |
| Receive the pizza                | Receive the value                     |
+----------------------------------+---------------------------------------+

Two important things to note here:

  1. You order the pizza and wait. You do not know when you'll receive the pizza. The same way the subscription does not know when it'll receive the data. That's what makes it asynchronous (fortunately the RxJS doesn't discriminate based on anything). All subscriptions will wait regardless of their properties.

  2. Now it is easy to mistake that the subscription doesn't have anything to do with the observable. That it's just a watcher waiting to receive the data while the observable has already started processing it's statements. That would be wrong. In that case the subscription callbacks should receive the data as soon you subscribe. But in reality the observable doesn't start until it is subscribed to.

Source: link

Recent Questions on angular

    Programming Languages