TL;DR: RxJS? ??? ??? ???? ???? ??? ?? ? API ?? ??? ?? ??? ??? ????? ?? ??? JavaScript ????????. Observable? ???? ??? ???? ????, ???? ???? ?? ???? ????, ??? ???? ??? ?? ?????.

?? JavaScript ??? ???? ????? ??? ??? ????? ???? ?? ???? ?????. RxJS(JavaScript? ??? ??)? ??? ??? ???? ?? ??? ??? ??????, ???? ???? ???? ??? ??? ???? ??? ? ??? ????.

RxJS? ??????

RxJS? ???? ?? ??? ???? ???? ??? ? ??? ?? ?????? ??? ? ?? ??? ????????. ? ???? ??? ???? ?? ??? ???? ? ????? ??? ?????? ??? ????. ? ?? ??? ??? ?? ??, ??? ????, ? ?? ??? ?? ??? ???? ??? ??? ????? ??? ? ?? ??? ?????? ??? ? ?? ?????. ??? ?????? ? ???? ?? ???? ?? ???? ??? ??? ??? ??? ??? ? ?? ??? ???? ??? ????? ?????.

?? ??

RxJS? ??? ????? ?? ?? ??? ???? ?? ?????.

• Observable: Observable? RxJS? ????, ??? ??? ?? ?? ???? ??? ??? ?????. ???, ??, ?? ??? ? ??? ???? ??? ? ????. ?? ?? ??? ???? ??? ??????? ?????.
• ???: ???? ?? ?? ??? ???? ??? ?? ???? ??? ???? ?????. ?? ? ???? ??? ? ??? ??? ???? ??? ??? ???.
• ??: ??? ???? ?? ?? ?? ?? ??? ?????. ?? ???? ?? ?? ?????? ?? ?? ? ??? ?? ??? ????. Observable? ???? ????? ??? ??? ??? ??? ??? ?????.
• ???: ???? ?? ?? ??? ??, ??? ? ??? ???? ?? ?? ?????. ??? ?? ??? ???? ?? ??? ???? ???? ???? ??? ??? ???. ?? ??? ???? ?? ??? ???? ???? ??? ??? ?????.

?? vs. ? Observable

RxJS? Observable? ?? ?? ??? ??? ? ????.

• Cold Observable? ?? ? ???? ??? ?? ?? ???? ?????. ??? ??? ??? ?? ?? ??? ??? ??? ??????. ?? ??, HTTP ???? ??? Observable? ???? ??? ??? ?? ??? ?? ??? ??(cold)? ?????.
• ? ????? ??? ????? ???? ???? ?? ??? ??? ???? ?? ?????. ?? ?? ??? ?? ???? ???? ??? ???? ?????. ??? ?? ???? ??? ???? ???? ??? ???? ?? ?? ???? ?? ? ? ????.

??? ?? ?? ??? ??? ??? ?????.

?? ?? ?? ??

import { Observable } from "rxjs";

const first5Numbers$ = new Observable((obs) => {
  console.log("hello!");
  for (let i = 0; i < 5; i++) {
    obs.next(i);
  }
  obs.complete();
});

// Logs nothing.
first5Numbers$.subscribe((n) => {
  console.log(n);
});

// Logs "hello!" followed by 0 1 2 3 4.

? ??? first5Numbers$? 0?? 4??? ??? ???? ?? Observable???. subscribe ???? Observable? ???? ?????. next ???? Observable?? ?? ???? ? ?????. complete ???? ???? ?? ????.

??? ??

import { interval } from "rxjs";
import { take } from "rxjs/operators";

const first5SpacedNumbers$ = interval(1000).pipe(take(5));

??? ???? ?? ???? ?? ??? first5SpacedNumbers$? ????. take ???? ???? ?? 5?? ??? ???? ? ?????.

? RxJS? ??????

RxJS? ?? ?????? ?? ????.

• ??? ??? ?? ??: RxJS? ??? ??? ??? ???? ?? ???? ?? ??? ???? ?? ??? ?? ??? Promise? ?????. ??? ??? ?? ??? ??? ???? ??? ? ?? ??? ? ?? ?? ?? ???? ?? ?? ? ????.
• ??? ??????: ? ???? ??? ?? RxJS? ?? ?, ?? ?? ???, ?? ?? ??? ?? ??? ? ??? ?????.
• ??? ??: RxJS? ??? ?? ??, DOM ??? ? ?? ??? ??? ??? ????? ??? ?? ? ??? ???? ???? ??? ?????.

RxJS? promise ? async/await ??

Promise? async/await? ?? ??? ??? ???? ? ????? RxJS? ??? ??? ???? ???? ? ?????. ??? ??? ????.

• ??: ?? ??? ???? ?? ??? ??? ??? ?????.
• Async/await: Promise ??? ?? ?? ????? ??? ??? ????? ??? ?? ??? ??? ??? ???.
• RxJS: ??? ??? ?? ?? ?? ???? ???? ??? ?? ??, ??? ? ??? ? ?? ??? ?????. ???? ????? ?? ????? ???? ????? ??????.

RxJS ??

??

npm ?? Yarn? ???? ????? RxJS? ??? ? ????.

import { Observable } from "rxjs";

const first5Numbers$ = new Observable((obs) => {
  console.log("hello!");
  for (let i = 0; i < 5; i++) {
    obs.next(i);
  }
  obs.complete();
});

// Logs nothing.
first5Numbers$.subscribe((n) => {
  console.log(n);
});

// Logs "hello!" followed by 0 1 2 3 4.

??

import { interval } from "rxjs";
import { take } from "rxjs/operators";

const first5SpacedNumbers$ = interval(1000).pipe(take(5));

?? HTML ??? CDN ??? ?? RxJS? ??? ?? ????.

npm install rxjs

??? Observable? ??? ??? ?????.

yarn add rxjs

? ???? of ???? ???? ? 1, 2, 3? ???? Observable? ?????.

RxJS? ???

???? ??? ???? ???? ?? ??? ??? ???? RxJS? ?????. ???? ?? ??? ??? ????.

• ?? ???: of, from, interval ? fromEvent? ?? ??? ???? ?? ?? ??? ?????.
• ?? ???: map, flatMap, switchMap ? scan? ?? ??? ?? ?????.
• ??? ???: filter, distinctUntilChanged, take
? ?? ??? ?? ?? ????? ?????.
• ?? ???: merge, concat, zip ? combineLatest? ?? ?? ?? ?? ??? ????? ?????.

?? ?? ??

?? ???? ?? ??? ???????.

• map: Observable?? ???? ?? ?????. ?? ?? ?? ???? HTTP ???? ?? ???? ??? ? ????.

import { Observable } from "rxjs";

const first5Numbers$ = new Observable((obs) => {
  console.log("hello!");
  for (let i = 0; i < 5; i++) {
    obs.next(i);
  }
  obs.complete();
});

// Logs nothing.
first5Numbers$.subscribe((n) => {
  console.log(n);
});

// Logs "hello!" followed by 0 1 2 3 4.

• ??: ?? ??? ???? ?? ?????. ?? ?? ?? ?? ?? ??? ??? ????? ??? ???? ???? ? ????.

import { interval } from "rxjs";
import { take } from "rxjs/operators";

const first5SpacedNumbers$ = interval(1000).pipe(take(5));

• ??: ?? ?? ?? ??? ?? ????? ???? ???? ?? ?? ???? ?? ?????. ?? ??? ?? ? ?? ??? ?? ??? ??? ???? ???? ? ?????.

npm install rxjs

• switchMap: ?? Observable? ?? ???? ??? ?? Observable? ???? ?? ?? Observable? ?????. ?? ?? ???? ??? ?? ??? ??? ?? ????? API ??? ?? ????? ?????.

yarn add rxjs

• catchError: ?? ??? ??? ??? ??? ???? ?????. ?? ?? ??? ????, ?? ?? ???? ?? ??? ????, ????? ? ?? ?? ??? ???? ???? ??? ? ????.

<script src="https://unpkg.com/rxjs@7/dist/bundles/rxjs.umd.min.js"></script>

RxJS? ?? ??

RxJS? ?? ??? ??? ?? ??? ???? ?? ??? ????? ?????.

• retry: Observable?? ??? ???? retry ???? ?? Observable? ?? ???? ?? ??? ?????. ??? ??? ????? ?? ??? ?? ??? ??? ??? ? ????.
• catchError: ?? ????? catchError ???? ???? ??? ????? ????, ????, ??? ????? ????, ???? ???? ?? ? ?? ?? ??? ??? ?? ????.
• finalize: ? ???? Observable? ????? ????? ??? ????? ??? ???? ?? ??? ?????. ??? ?? ?? ?? ???? ?? ?? ??? ?????.

RxJS??? ?? ??? ?? ?? ??? ?????.

import { of } from "rxjs";

const myObservable$ = of(1, 2, 3);

myObservable$.subscribe((value) => {
  console.log(value); // Outputs: 1, 2, 3
});

? ??? Observable? ??? ???? ? ? ???? ?????. ?? ???? ???? catchError ???? ??? ?????. finalize ???? Observable? ????? ??? ???? ???? ?????.

?? ??

RxJS? ?? ????? ??? ??? ? ??? ???????.

• ?? ??? ??: RxJS? ???? ??? ? ????? ??? ??? ????? ??? ??? ??? ? ?????. ?? ?? ??? ???? ?? ?? ??? ??????, ??? ?? ??? ????, ???? ???? ??? ? ????.
• API ??: RxJS? ?? ???? ??? ??????. interval ? switchMap? ?? ???? ???? ????? API?? ???? ??? ??? ??? ???? ??? ? ????.
• ??? ?? ?: RxJS? ??? ?? ?? ???? ? ?????. Hot Observable? ??? ???? ??? ? ??? map ? filter? ?? ???? ???? ???? ???? ??? ? ????.

? ? ?? ??

?????? RxJS? ????? ?????:

• ??: ??? ??? ???? ???? ??? ? ?? ? ?? ?? ??? ?? ?? ??? ?????.
• ?? ??: catchError ? ???? ???? ??? ???? ???? ? ???? ?????.
• ?? ??: Observable? ? ?? ???? ?? ? ??? ???? ??? ??? ?????. ?? ??? ?????? Angular? takeUntil ?? async ???? ?? ??? ??? ???.
• ???: TestScheduler? ?? RxJS ??? ????? ???? ?? ??? ??? ???? ??????.

???? ??

• RxJS ??: RxJS? ????? ????? ???? ???? ?? ? ????. ? ??? ?? ??? ????? ?????.
• ??? ??: Observable ?? ??? ???? ??? ??? ??? ? ????. ?? ??? ?? ??? ?????.

??

???? ????? ?????! RxJS? JavaScript ??? ??? ??? ???? ???? ???? ??? ??? ?????. ??? ??? ??? ??? ??? ????? ??? ?? ???? ???? ???? ?? ???? ?? ??? ??? ?? ??? ? ????. ?? ?? ??, ??? ??? ???? ??? ?????? RxJS? ???? ??? ???? JavaScript ?? ??? ???? ? ????. ???? ?? ??? ??? ??? ?? ? ??? ?? ???, ?? ??? ? ??? ???? ??? ????? ??? ????.

?? ???

• Axios? Fetch API? ??? HTTP ????? ??
• TypeScript ???? ??: ?? ???
• ?? ???? ?? API ??: ???? ?? ?? ??
• JavaScript? ??? ??: ECMAScript 2024(15?)

? ??? RxJS? ??? JavaScript ?????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!