RXJS operator practices Angular development needs to know

Common operators

The local usage environment is rollup+ RXJS. For details on rollup configuration, please refer to another article, which will not be covered here.

import { of,Observable, interval,Subject ,from,bindCallback} from 'rxjs';
import { version } from './package.json';
import { ajax } from 'rxjs/ajax';
import { map, catchError } from 'rxjs/operators';

const someFunction = (a, b, c) => {
   console.log("a"); // 5
   console.log("b"); // 'some string'
   console.log("c"); // {someProperty: 'someValue'}
 };
  
 const boundSomeFunction = bindCallback(someFunction);
 boundSomeFunction().subscribe(values => {
   console.log(values) // [5, 'some string', {someProperty: 'someValue'}]
 });
Copy the code

from

Import {from} from 'RXJS '; Const arr = [1, 2, 3]; const result$ = from(arr); result$.subscribe(res => console.log(res));Copy the code

range

Import {range} from 'RXJS '; const numbers = range(1, 10); numbers.subscribe(x => console.log(x));Copy the code

timer

/ / 1... import { timer } from 'rxjs'; Const Numbers = timer (3000100); Subscribe (x => console.log(x+1)); subscribe(x => console.log(x+1));Copy the code

interval

// 1....
import { interval } from 'rxjs';

const numbers = interval(1000);
numbers.subscribe(x => console.log(x+1));
Copy the code

of

Import {of} from "RXJS "; Const result$= of(arr); const result$= of(arr); result$.subscribe(res => console.log(res)); // const result$= of(1,2,3); result$.subscribe(res => console.log(res));Copy the code

conditional

import { defer, fromEvent, interval,of } from 'rxjs'; Const clicksOrInterval = defer(() => {//es6 supports return math.random () > 0? of('click') : interval(1000); }); clicksOrInterval.subscribe(x => console.log(x));Copy the code

import { defer, fromEvent, interval,of, iif } from 'rxjs';
let isFisrt;
const clicksOrInterval = iif(
   () => isFisrt,
   of('first'),
   of('second')
);
isFisrt = true;
clicksOrInterval.subscribe(x => console.log(x));

isFisrt = false;
clicksOrInterval.subscribe(x => console.log(x));
Copy the code

delay

import { fromEvent ,of} from 'rxjs'; import { delay } from 'rxjs/operators'; Const res = of (1, 2, 3); const delayedClicks = res.pipe(delay(1000)); // each click emitted after 1 second delayedClicks.subscribe(x => console.log(x));Copy the code

Image stabilization

import { fromEvent } from 'rxjs';
import { throttle } from 'rxjs/operators';

const clicks = fromEvent(document, 'click');
const result = clicks.pipe(throttle(ev => interval(1000)));
result.subscribe(x => console.log(x));
Copy the code

map

import { of} from 'rxjs'; import { delay,map} from 'rxjs/operators'; // note that map introduces const res = of(1,2,3); const delayedClicks = res.pipe(map(item => item * 2)); // each click emitted after 1 second delayedClicks.subscribe(x => console.log(x));Copy the code

filter

import { of} from 'rxjs'; import { delay,filter} from 'rxjs/operators'; Const res = of (1, 2, 3); const delayedClicks = res.pipe(filter(item => item % 2 === 0)); // each click emitted after 1 second delayedClicks.subscribe(x => console.log(x));Copy the code

Good article recommendation

Angular develops an improved vscode plug-in

RXJS operator practices angular development needs to know

Angular8 Daily Development Guide to Avoiding pitfalls

Angular8 Unit Testing Practice Guide for Multiple scenarios

Author: Front-end ramble

Contact email: [email protected]

Copyright Notice: This article is licensed under a CC BY-NC-SA 4.0 license unless otherwise stated. Reprint please indicate the source!