Shulou(Shulou.com)06/01 Report--

Editor to share with you what the use of Observables in JavaScript programming, I believe most people do not understand, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Install the RxJS library

To start talking about Observables, let's first install the RxJS library, as follows:

Npm install rxjs

The RxJS library already includes the declaration files required by Typescript, so there is no need to install them using @ types alone.

To generate an Observable, we can use of with the following function:

Import {of, Observable} from "rxjs"; const emitter: Observable = of (1,2,3,4)

Here, we first import of functions and Observable types from the rxjs library. Then we define a constant variable named emitter, which uses general syntax to define its type as Observable of type number. Then we assign the result of the of function to the emitter variable, which creates an Observable from the numbers 1 to 4. We can now create an Observer as follows:

Emitter.subscribe ((value: number) = > {console.log (`value: ${value} `)})

Here, we call the subscribe function on the variable emitter. Because the emitter variable is of type Observable, it automatically exposes the subscribe function to register Observers. The subscribe function takes a function as an argument, which will be called once for each value emitted by Observable. The output of this code is as follows:

Value: 1 value: 2 value: 3 value: 4

Here, we can see that the function we passed to the subscribe function is actually called once for each value emitted by Observable.

Note that Observable starts emitting values only when the subscribe function is called on Observable. Calling this subscribe function is called a subscription Observable, and the value produced by Observable is also called an Observable stream.

The of function has a partner function named from, which takes an array as input to the Observable, as shown below:

Const emitArray: Observable = from ([1,2,3,4]); emitArray.subscribe ((value: number) = > {console.log (`arr: ${value} `);})

Here, we have a variable named emitArray, which is of type Observable, and is using the from function to create an Observable from the array. Similarly, we call the subscribe function on the Observable named emitArray and provide a function to call for each value emitted by the Observable. The output of this code is as follows:

Arr: 1 arr: 2 arr: 3 arr: 4

Here, we can see that the from function has created an Observable stream from the array input, and the function we provided to the subscribe function is calling once for each value emitted by Observable.

Pipe and Map

The RxJS library provides a pipe function for all Observable, similar to the subscribe function. The pipe function takes a variable number of functions as arguments and executes them for each value emitted by Observable. The functions provided to the pipe function are often called Observable operators, and they all take an Observable as input and return an Observable as output. The pipe function emits an Observable stream.

This concept is best explained by reading some code, as shown in the following example:

Import {map} from "rxjs/operators"; const emitter = of (1,2,3,4); const modulus = emitter.pipe (map ((value: number) = > {console.log (`received: ${value} `); return value% 2;})); modulus.subscribe ((value: number) = > {console.log (`modulus: ${value}`);})

Here, we start with an Observable called emitter, which emits values from 1 to 4. Then we define a variable named modulus to hold the result of calling the pipe function on emitter Observable. The only argument we provide to the pipe function is the call to the map function, which is one of the operator functions of RxJS.

The map function takes a single function as an argument and calls this function for each value emitted by Observable. This map function is used to map one value to another, or to modify the emitted value in some way. In this example, we return the result of applying the modulus of 2 to each value.

Finally, we subscribe to Observable and record its value to the console. The output of this code is as follows:

Received: 1 modulus: 1 received: 2 modulus: 0 received: 3 modulus: 1 received: 4 modulus: 0

Here, we can see that emitter Observable emits values from 1 to 4, and modules Observable is emitting Modules 2 for each value received.

Note that in these code examples, we do not explicitly set the type of Observable.

Emitter Observable and modules Observable can be of the following explicit types:

Const emitter: Observable = of (1,2,3,4); const modulus: Observable = emitter.pipe (...)

Here, we specify the types of emitter Observable and modules Observable. This is not absolutely necessary because the TypeScript compiler determines the correct return type when using Observables. However, it does clearly state our expectations of the Observable stream, and in larger or more complex Observable transformations, explicitly setting the expected return type makes the code more readable and prevents errors.

Combination operator

The pipe function allows us to combine multiple operator functions, each of which will be applied to the value emitted by Observable. Consider the following code:

Const emitter = of (1,2,3,4); const stringMap = emitter.pipe (map ((value: number) = > {return value * 2}), map ((value: number) = > {return `str_$ {value} `}); stringMap.subscribe ((value: string) = > {console.log (`stringMap emitted: ${value}`);})

Here, we have a named emitter for Observable, which will emit values from 1 to 4. Then we have a variable called stringMap, which holds the results of the pipe function of emitter Observable. In this pipe function, we have two map functions. The first map function multiplies the incoming numeric value by 2, and the second map function converts it to the prefixed string str_.

Then we subscribe to Observable and record each value to the console. The output of this code is as follows:

StringMap emitted: str_2 stringMap emitted: str_4 stringMap emitted: str_6 stringMap emitted: str_8

Here, we can see that both map functions apply to each value emitted by emitter Observable. Notice that in our second map function, we have actually changed the type of each value from number type to string type. This is why we specify in our function that the type of subscribe for the value parameter is string.

These are all the contents of the article "what is the use of Observables in JavaScript programming?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.