development

약속을 관찰 가능으로 변환

big-blog 2020. 6. 13. 09:29
반응형

약속을 관찰 가능으로 변환


나는 관찰 가능한 물건으로 머리를 감싸려고합니다. 나는 관측 가능 항목이 개발 및 가독성 문제를 해결하는 방식을 좋아합니다. 내가 읽을 때, 혜택은 엄청납니다.

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);

이 시도:

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

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


...에서

from이전에 생성 된 약속을 Observable로 직접 변환하는 데 사용 합니다.

import { from } from 'rxjs';

const observable$ = from(getPromise());

내부 Promise가 이미 만들어 졌거나 Observable과 동시에 만들어 지므로 Promise의 본문이 실행 중이거나 Observable이 만들어 짐에 따라 이미 해결되었습니다. 내부 약속이 이미 해결 된 경우 Observable의 새 구독자가 즉시 값을 가져옵니다.

연기하다

deferPromise 팩토리 기능을 입력으로 사용 하여 Promise의 생성 및 Observable 로의 변환을 지연시킵니다.

import { defer } from 'rxjs';

const observable$ = defer(() => getPromise());

차이점 fromdefer가입자 기다렸다가 주어진 Promise 팩토리 기능을 호출하여 새 Promise 만 작성한다는 것입니다. 이것은 Observable을 만들고 싶지만 내부 Promise를 즉시 실행하고 싶지 않을 때 유용합니다. 내부 약속은 누군가가 Observable에 가입 ​​한 경우에만 실행됩니다. 각 가입자는 또한 새로운 Observable을 얻게됩니다.

fromhttps://stackblitz.com/edit/rxjs-1jd2x4 의 차이점defer


Subject를 사용하여 promise에서 next () 함수를 트리거 할 수도 있습니다 . 아래 샘플을 참조하십시오.

아래와 같은 코드를 추가하십시오 (서비스를 사용했습니다)

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);
    }
  }

참고URL : https://stackoverflow.com/questions/39319279/convert-promise-to-observable

반응형