RxJS 팁: 생성 함수: of()

5317 단어 angularrxjs
RxJSof 함수는 지정된 값을 내보내는 생성 함수입니다.

어떻게 작동합니까?


of 생성 함수는 일련의 값을 가져와 해당 값을 방출하는 Observable을 생성하고 완료합니다.
of로 생성된 Observable은 동기식입니다. 즉, 값이 방출되고 구독 후 즉시 완료됩니다.



위의 예는 세 개의 문자열을 of 함수에 전달하고 구독합니다.

그런 다음 세 문자열이 각각 내보내지고 기록됩니다.

일반적인 용도는 무엇입니까?



작업 파이프라인을 시도하기 위한 샘플 코드입니다.

of(1, 2, 3)


사용자는 처리할 항목(장바구니에 있는 제품의 ID, 재생 목록에 대해 선택한 노래의 ID 등)을 선택하고 해당 항목은 Observable에서 내보냅니다.

of(45, 72, 21)


한 분기가 Observable을 반환하고 다른 분기가 Observable로 정적 값(예: null, 빈 배열 또는 초기화된 값)을 반환하는 분기의 경우.

of(null)
of({})
of(this.initializedProduct())


분기의 보다 구체적인 예는 다음과 같습니다.

  getProduct(id: number): Observable<Product> {
    if (id === 0) {
      return of(this.initializeProduct()); // <-- of() used here
    }
    const url = `${this.productsUrl}/${id}`;
    return this.http.get<Product>(url)
      .pipe(
        tap(data => console.log(JSON.stringify(data))),
        catchError(this.handleError)
      );
  }


이렇게 하면 각 분기가 Observable을 반환합니다.

참고: 이 예제는 of()의 사용법을 보여주기 위한 것이며 이 목표를 달성하기 위한 최상의 기술을 보여주기 위한 것이 아닙니다.

코드는 어디에 있습니까?



다음은 of 생성 기능을 보여주는 link to sample code입니다. 자유롭게 포크하여 사용해보십시오.

마블 다이어그램은 어떻습니까?



다음은 마블 다이어그램에 표시된 of 생성 함수입니다.


덕분에
이 대리석 도표를 위해.
of의 또 다른 일반적인 용도가 있습니까? 그렇다면 댓글을 남겨주세요.

즐기다!

좋은 웹페이지 즐겨찾기