Triggered from a practical example, understand what is the defer function of Rxjs

When we develop complex Angular applications, we often use Rxjs defer functions, for example:

Create an Observable and call the Observable factory when subscribing to create an Observable object for each new Observer.

This function receives an input parameter, the type is a factory function. The output is an Observable object, once subscribed, its bound factory function will be called.

The essence of defer is the delayed creation mechanism, that is, the Observable object is created only when the returned Observable is subscribed.

defer allows you to create an Observable only when the Observer subscribes. It waits until the Observer subscribes to it, calls the given factory function to obtain an Observable-the factory function usually generates a new Observable-and subscribes the Observer to this Observable. If the factory function returns a false value, use EMPTY as Observable instead. Last but not least, exceptions during the factory function call are passed to the observer by calling error.

Look at this specific example below.

Let's step through the code above. First enter the internal execution logic of defer:

Inside the defer, a new Observable is constructed directly and the factory function is passed in. The factory function is called on line 8 to generate an Observable object containing the business logic of the application and store it in input. Finally, subscribe the subscriber of the application to the Observable returned by this factory function.

We stepped through it again and found that the program execution flow jumped from line 5 to line 16 in the above figure. This reflects the defer function to delay the creation of Observable objects. The so-called delayed creation, to be precise, should delay the creation of Observable objects containing business logic.

Then, back to our application code, call subscribe for the wrapper Observable object returned by the defer function, which will trigger the creation of the Observable object containing the business logic:

The subscription function of wrapper Observable returned by defer is executed here:

Call the factory method to create an Observable object containing business logic:

The current random number execution result is greater than 0.5, and the new Observable object generated by fromEvent is returned.

Immediately afterwards, the anonymous function x => console.log(x) on line 24 will be triggered whenever the screen is clicked by the mouse. This anonymous function was originally subscribed to the wrapper Observable object returned by the defer function. When the factory function returns a new Observable object, it is automatically subscribed to this new Observable object.

Summarize the working principle of defer:

(1) When the defer function is called, a factory function is passed in as an input parameter. This factory function returns a new Observable object that contains business logic.

(2) The defer function returns another new Observable object. This Observable object is called a wrapper or dummy Observable object because it does not contain any business logic. The only value of survival is to realize the delayed creation of business logic Observable objects.

(3) When the wrapper Observable is subscribed, the execution of the factory function is triggered, a new Observable object is generated, and its Observer is notified at the same time.

More original articles by Jerry, all in: "Wang Zixi":