약속을 관찰 가능으로 변환

약속을 관찰 가능으로 변환

저는 관찰할 수 있는 것들에 머리를 싸매려고 노력하고 있습니다.저는 관찰 가능한 것들이 개발 및 가독성 문제를 해결하는 방식을 좋아합니다.제가 읽은 바로는 혜택이 엄청납니다.

HTTP 및 컬렉션에서 관찰할 수 있는 것은 단순한 것처럼 보입니다.어떻게 이런 것을 관찰 가능한 패턴으로 변환할 수 있습니까?

이것은 인증을 제공하기 위해 내 서비스 구성 요소에서 가져온 것입니다.나는 이것이 Angular2의 다른 HTTP 서비스처럼 작동하기를 원합니다 - 데이터, 오류 및 완료 핸들러를 지원합니다.

firebase.auth().createUserWithEmailAndPassword(email, password)
  .then(function(firebaseUser) {
    // do something to update your UI component
    // pass user object to UI component
  })
  .catch(function(error) {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // ...
  });

여기서 어떤 도움이라도 주시면 감사하겠습니다. 유일한 은 제가가유대은안을 만드는 것이었습니다.EventEmitter 저는이 서비스 합니다.

RxJS 6.0.0을 사용하는 경우:

import { from } from 'rxjs';
const observable = from(promise);

1 직접 실행/변환

이전에 만든 약속을 관찰 가능한 약속으로 직접 변환하는 데 사용합니다.

import { from } from 'rxjs';

// getPromise() is called once, the promise is passed to the Observable
const observable$ = from(getPromise());

observable$구독자에게 약속 값을 효과적으로 재생하는 핫 관찰 가능 항목이 됩니다.

프로듀서(이 경우 Promise)가 Observable 외부에 생성되므로 핫 Observable입니다.여러 가입자가 동일한 약속을 공유합니다.내부 약속이 해결된 경우 관찰 가능한 새 가입자가 즉시 값을 얻습니다.

가입할 때마다 2회 지연 실행

Promise factory 함수를 입력으로 사용하여 Promise를 생성하고 Observable로 변환하는 작업을 연기합니다.

import { defer } from 'rxjs';

// getPromise() is called every time someone subscribes to the observable$
const observable$ = defer(() => getPromise());

observable$차가운 관측 가능한 상태가 될 것입니다.

프로듀서(약속)가 관찰 가능한 내부에 생성되기 때문에 차가운 관찰 가능합니다.각 가입자는 지정된 Promise factory 함수를 호출하여 새 Promise를 만듭니다.

이통해다생수다있니습을 수 있습니다.observable$약속을 생성하여 실행하지 않고 여러 가입자와 이 약속을 공유하지 않습니다. 각 observable$효과적으로 요구하는 것.from(promiseFactory()).subscribe(subscriber)따라서 각 가입자는 자신의 새 약속을 만들고 새 관찰 가능 항목으로 변환한 후 이 새 관찰 가능 항목에 첨부합니다.

3 많은 사업자가 약속을 직접 수락

하는 대부분의 RxJS 연산자):merge,concat,forkJoin,combineLatest가능한 예: ...)을 변환합니다.switchMap,mergeMap,concatMap,catchError으로 받아들입니다.어차피 둘 중 하나를 사용하는 경우에는 사용할 필요가 없습니다.from먼저 약속을 포장하는 것(그러나 차가운 관찰 가능한 것을 만들기 위해서는 여전히 사용해야 할 수도 있습니다.defer).

// Execute two promises simultaneously
forkJoin(getPromise(1), getPromise(2)).pipe(
  switchMap(([v1, v2]) => v1.getPromise(v2)) // map to nested Promise
)

설명서 또는 구현을 확인하여 사용 중인 운영자가 다음을 수락하는지 확인합니다.ObservableInput또는SubscribableOrPromise.

type ObservableInput<T> = SubscribableOrPromise<T> | ArrayLike<T> | Iterable<T>;
// Note the PromiseLike ----------------------------------------------------v
type SubscribableOrPromise<T> = Subscribable<T> | Subscribable<never> | PromiseLike<T> | InteropObservable<T>;

---

의 from그리고.defer예: https://stackblitz.com/edit/rxjs-6rb7vf

const getPromise = val => new Promise(resolve => {
  console.log('Promise created for', val);
  setTimeout(() => resolve(`Promise Resolved: ${val}`), 5000);
});

// the execution of getPromise('FROM') starts here, when you create the promise inside from
const fromPromise$ = from(getPromise('FROM'));
const deferPromise$ = defer(() => getPromise('DEFER'));

fromPromise$.subscribe(console.log);
// the execution of getPromise('DEFER') starts here, when you subscribe to deferPromise$
deferPromise$.subscribe(console.log);

defer아마도 대부분의 사람들이 찾고 있는 운영자일 것입니다. 많은 앱들이 관찰 가능한 것에 의존하고 구독 시 데이터 가져오기를 트리거합니다. from그러나 일부 초기화 프로세스 중에 Promise를 한 번 생성한 다음 여러 번 구독되는 Observable을 통해 그 값을 전파하려는 경우에도 모든 구독자에 대해 Promise를 다시 생성하고 실행하지 않으려는 경우와 같은 특정 사용 사례에서 여전히 사용 가능한 옵션입니다.

사용해 보십시오.

import 'rxjs/add/observable/fromPromise';
import { Observable } from "rxjs/Observable";

const subscription = Observable.fromPromise(
    firebase.auth().createUserWithEmailAndPassword(email, password)
);
subscription.subscribe(firebaseUser => /* Do anything with data received */,
                       error => /* Handle error here */);

여기에서 Promise 연산자의 완전한 참조를 찾을 수 있습니다.

약속을 관측 가능한 것으로 변환하는 올바른 패턴은 사용 및 연산자입니다.

import { defer, from } from 'rxjs';
    
const observable$ = defer(() => from(myPromise()));

에게 요한이가 defer교환원?

약속은 간절하며, 이것은 호출되면 즉시 발사된다는 것을 의미합니다.이것은 관측 가능한 방식과 반대입니다.관측 가능한 것들은 게으릅니다, 그것들은 단지 다음과 같은 경우에만 발사됩니다..subscribe()이 호출됩니다.이것이 우리가 항상 그것을 포장해야 하는 이유입니다.defer교환입니다.그from 않기 에 교원은이하않다습니지, 을.defer항상 필요합니다.

약속 기능 주위에 래퍼를 추가하여 관찰자에게 관찰 가능한 항목을 반환할 수 있습니다.

• 관찰자가 가입한 경우에만 관찰자를 만들 수 있는 지연() 연산자를 사용하여 Lazy Observable을 만듭니다.

import { of, Observable, defer } from 'rxjs'; 
import { map } from 'rxjs/operators';


function getTodos$(): Observable<any> {
  return defer(()=>{
    return fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => response.json())
      .then(json => {
        return json;
      })
  });
}

getTodos$().
 subscribe(
   (next)=>{
     console.log('Data is:', next);
   }
)

import { from } from 'rxjs';

from(firebase.auth().createUserWithEmailAndPassword(email, password))
.subscribe((user: any) => {
      console.log('test');
});

다음은 위의 답변 중 일부를 조합하여 코드를 약속에서 관찰 가능한 것으로 변환하는 짧은 버전입니다.

지연을 사용할 수도 있습니다.주요 차이점은 약속이 열심히 해결되거나 거부되지 않는다는 것입니다.

환자를 사용하고 약속에서 다음() 함수를 트리거할 수도 있습니다.아래 샘플 참조:

아래와 같은 코드 추가 (나는 서비스를 이용했습니다)

class UserService {
  private createUserSubject: Subject < any > ;

  createUserWithEmailAndPassword() {
    if (this.createUserSubject) {
      return this.createUserSubject;
    } else {
      this.createUserSubject = new Subject < any > ();
      firebase.auth().createUserWithEmailAndPassword(email,
          password)
        .then(function(firebaseUser) {
          // do something to update your UI component
          // pass user object to UI component
          this.createUserSubject.next(firebaseUser);
        })
        .catch(function(error) {
          // Handle Errors here.
          var errorCode = error.code;
          var errorMessage = error.message;
          this.createUserSubject.error(error);
          // ...
        });
    }

  }
}

아래와 같은 구성 요소에서 사용자 만들기

class UserComponent {
  constructor(private userService: UserService) {
    this.userService.createUserWithEmailAndPassword().subscribe(user => console.log(user), error => console.log(error);
    }
  }

코드 예제에서 보여주는 것처럼 Rxjs에서 제공하는 연산자가 있습니다.

@Injectable({
  providedIn: 'root'
})
export class InventoryService {
  constructor(private httpClient: HttpClient) {}

  getCategories(): Observable<Category[]> {
    const url = 'https://www.themealdb.com/api/json/v1/1/categories.php';

    return this.httpClient.get<CategoriesResponse>(url).pipe(
      map(response => response.categories)
    );
  }
}

그리고 구성 요소 내부에서 연산자를 적용할 수 있습니다.

export class AppComponent {
  categories: any[];

  constructor(private inventoryService: InventoryService) {}

  public async loadCategories() {
    this.categories = await this.inventoryService
      .getCategories()
      .**toPromise()**

는 더 이상 Rxjs7+는 사용하는 것이 .lastValueFrom()연산자:

  public async loadCategories() {
    const categories$ = this.inventoryService.getCategories();
    this.categories = await **lastValueFrom**(categories$);
  }

업데이트된 버전으로 업데이트된 코드에 도움이 되었으면 좋겠습니다 :)

언급URL : https://stackoverflow.com/questions/39319279/convert-promise-to-observable