Programing

rxjs에서 Observable을 가져 오는 가장 좋은 방법

lottogame 2020. 11. 24. 07:32
반응형

rxjs에서 Observable을 가져 오는 가장 좋은 방법


내 각도 2 앱 Observable에는 rxjs라이브러리 클래스 를 사용하는 서비스가 있습니다.

import { Observable } from 'rxjs';

지금 ObservabletoPromise()기능을 사용할 수 있도록 사용하고 있습니다.

나는 어딘가에서 다른 StackOverflow 질문을 읽었습니다.이 방법으로 가져오고 가져 오면 페이지로드 시간 및 / 또는 코드 기반을 증가시키는 라이브러리 rxjs/Rx에서 불필요한 항목을 많이 가져옵니다 rxjs.

내 질문은 다른 모든 것을 가져올 필요없이 함수를 Observable사용할 수 있도록 가져 오는 가장 좋은 방법은 무엇 toPromise()입니까?


Rxjs v 6. *

새로운 버전의 rxjs로 단순화되었습니다.

1) 연산자

import {map} from 'rxjs/operators';

2) 기타

import {Observable,of, from } from 'rxjs';

연결하는 대신. 예를 들면

이전 구문 :

source.map().switchMap().subscribe()

새로운 구문 :

source.pipe(map(), switchMap()).subscribe()

참고 : 일부 연산자는 JavaScript 예약어와 이름 충돌로 인해 이름이 변경되었습니다! 여기에는 다음이 포함됩니다.

do-> tap,

catch -> catchError

switch -> switchAll

finally -> finalize


Rxjs v 5. *

연산자를 가져와야 할 때마다 문서를 계속 확인하기 때문에이 답변을 부분적으로 작성하고 있습니다. 더 나은 방법으로 할 수있는 일이 있으면 알려주세요.

1) import { Rx } from 'rxjs/Rx';

전체 라이브러리를 가져옵니다. 그러면 각 연산자를로드하는 것에 대해 걱정할 필요가 없습니다. 그러나 Rx를 추가해야합니다. 트리 쉐이킹이 최적화되고 필요한 기능 만 선택하기를 바랍니다 (확인 필요) . 주석에서 언급했듯이 트리 쉐이킹은 도움이되지 않습니다. 따라서 이것은 최적화 된 방법이 아닙니다.

public cache = new Rx.BehaviorSubject('');

또는 개별 연산자를 가져올 수 있습니다 .

이렇게하면 해당 파일 만 사용하도록 앱이 최적화됩니다 .

2) import { _______ } from 'rxjs/_________';

이 구문은 일반적으로 Rx그 자체 Observable등의 주요 객체에 사용됩니다 .

이 구문으로 가져올 수있는 키워드

 Observable, Observer, BehaviorSubject, Subject, ReplaySubject

삼) import 'rxjs/add/observable/__________';

Angular 5 업데이트

rxjs 5.5.2+를 사용하는 Angular 5

import { empty } from 'rxjs/observable/empty';
import { concat} from 'rxjs/observable/concat';

이들은 일반적으로 Observable과 직접 함께 제공됩니다. 예를 들면

Observable.from()
Observable.of()

이 구문을 사용하여 가져올 수있는 다른 키워드 :

concat, defer, empty, forkJoin, from, fromPromise, if, interval, merge, of, 
range, throw, timer, using, zip

4) import 'rxjs/add/operator/_________';

Angular 5 업데이트

rxjs 5.5.2+를 사용하는 Angular 5

import { filter } from 'rxjs/operators/filter';
import { map } from 'rxjs/operators/map';

이들은 일반적으로 Observable이 생성 된 후 스트림에 들어옵니다. flatMap이 코드 조각 과 같이 :

Observable.of([1,2,3,4])
          .flatMap(arr => Observable.from(arr));

이 구문을 사용하는 다른 키워드 :

audit, buffer, catch, combineAll, combineLatest, concat, count, debounce, delay, 
distinct, do, every, expand, filter, finally, find , first, groupBy,
ignoreElements, isEmpty, last, let, map, max, merge, mergeMap, min, pluck, 
publish, race, reduce, repeat, scan, skip, startWith, switch, switchMap, take, 
takeUntil, throttle, timeout, toArray, toPromise, withLatestFrom, zip

FlatMap : flatMap에 별칭 이므로을 사용 mergeMap하려면 가져와야 mergeMap합니다 flatMap.


/add수입에 대한 참고 사항 :

We only need to import once in whole project. So its advised to do it at a single place. If they are included in multiple files, and one of them is deleted, the build will fail for wrong reasons.


Update for RxJS 6 (April 2018)

It is now perfectly fine to import directly from rxjs. (As can be seen in Angular 6+). Importing from rxjs/operators is also fine and it is actually no longer possible to import operators globally (one of major reasons for refactoring rxjs 6 and the new approach using pipe). Thanks to this treeshaking can now be used as well.

Sample code from rxjs repo:

import { Observable, Subject, ReplaySubject, from, of, range } from 'rxjs';
import { map, filter, switchMap } from 'rxjs/operators';

range(1, 200)
  .pipe(filter(x => x % 2 === 1), map(x => x + x))
  .subscribe(x => console.log(x));

Backwards compatibility for rxjs < 6?

rxjs team released a compatibility package on npm that is pretty much install & play. With this all your rxjs 5.x code should run without any issues. This is especially useful now when most of the dependencies (i.e. modules for Angular) are not yet updated.


One thing I've learnt the hard way is being consistent

Watch out for mixing:

 import { BehaviorSubject } from "rxjs";

with

 import { BehaviorSubject } from "rxjs/BehaviorSubject";

This will probably work just fine UNTIL you try to pass the object to another class (where you did it the other way) and then this can fail

 (myBehaviorSubject instanceof Observable)

It fails because the prototype chain will be different and it will be false.

I can't pretend to understand exactly what is happening but sometimes I run into this and need to change to the longer format.

참고URL : https://stackoverflow.com/questions/42376972/best-way-to-import-observable-from-rxjs

반응형