RxJS (Reactive Extensions for JavaScript) is a reactive programming library for JavaScript that allows you to create and manipulate data streams using observable sequences and operators. Here are some of the most important methods and operators in RxJS:
- Observable.create: Observable is the fundamental building block of RxJS. Observable.create allows you to create observables that emit values over time. It works by registering a function that will be executed when someone subscribes to the observable.
1const observable = new Observable(observer => { 2 observer.next('Hello'); 3 observer.next('World'); 4});
- subscribe: The subscribe method allows you to register observers to observables. An observer is an object with three optional methods: next, error, and complete. The next function is called when the observable emits a value, error is called in case of an error, and complete is called when the observable finishes emitting values.
1observable.subscribe({ 2 next: value => console.log(value), 3 error: err => console.error(err), 4 complete: () => console.log('Completed'), 5});
- map: The map operator allows you to transform the values emitted by the observable. The map operator takes a function that transforms each emitted value and then returns a new value.
1const source = of(1, 2, 3); 2const mapped = source.pipe(map(value => value * 2)); 3mapped.subscribe(value => console.log(value)); // Output: 2, 4, 6
- filter: The filter operator allows you to filter the values emitted by the observable. filter takes a function that returns a boolean value for each emitted value. If the function returns true, the value will be passed on; if it returns false, the value will be ignored.
1const source = of(1, 2, 3, 4, 5); 2const filtered = source.pipe(filter(value => value % 2 === 0)); 3filtered.subscribe(value => console.log(value)); // Output: 2, 4
- mergeMap: The mergeMap operator is used to transform and merge the values emitted by the observable with other observables. It takes a function that returns an observable for each emitted value, and then merges the values emitted by those observables.
1const source = of(1, 2, 3); 2const merged = source.pipe(mergeMap(value => of(value, value * 2))); 3merged.subscribe(value => console.log(value)); // Output: 1, 2, 2
- switchMap: The switchMap operator is similar to mergeMap, but it cancels the previous inner observable when a new value is emitted by the source observable. This is useful when you only care about the latest value and want to avoid handling outdated values. It takes a function that returns an observable for each emitted value and switches to the latest observable.
1const source = of(1, 2, 3); 2const switched = source.pipe(switchMap(value => of(value, value * 2))); 3switched.subscribe(value => console.log(value)); // Output: 1, 4, 6
- debounceTime: The debounceTime operator helps you to control the rate of events emitted by the observable. It takes a duration in milliseconds and only emits the latest value from the source observable if a specified duration has passed without any other value being emitted. This is useful for reducing the number of events triggered in rapid succession, such as user input events.
1const source = fromEvent(document, 'mousemove'); 2const debounced = source.pipe(debounceTime(300)); 3debounced.subscribe(event => console.log(event)); // Emits the latest mousemove event after 300 ms of inactivity
- catchError: The catchError operator allows you to handle errors that occur during the processing of an observable. It takes a function that receives the error as an argument and returns a new observable to replace the one that failed. This can be useful for providing fallback values or retrying the operation.
1const source = throwError('An error occurred'); 2const errorHandled = source.pipe( 3 catchError(err => { 4 console.error(err); 5 return of('Fallback value'); 6 }) 7); 8errorHandled.subscribe(value => console.log(value)); // Output: Fallback value