RxJS Observable

2020-10-12 15:59 更新

表示在任何時(shí)間量?jī)?nèi)的任何一組值。這是 RxJS 的最基本構(gòu)建塊。

class Observable<T> implements Subscribable {
  static create: Function
  static if: typeof iif
  static throw: typeof throwError
  constructor(subscribe?: (this: Observable<T>, subscriber: Subscriber<T>) => TeardownLogic)
  _isScalar: boolean
  source: Observable<any>
  operator: Operator<any, T>
  lift<R>(operator: Operator<T, R>): Observable<R>
  subscribe(observerOrNext?: NextObserver<T> | ErrorObserver<T> | CompletionObserver<T> | ((value: T) => void), error?: (error: any) => void, complete?: () => void): Subscription
  _trySubscribe(sink: Subscriber<T>): TeardownLogic
  forEach(next: (value: T) => void, promiseCtor?: PromiseConstructorLike): Promise<void>
  pipe(...operations: OperatorFunction<any, any>[]): Observable<any>
  toPromise(promiseCtor?: PromiseConstructorLike): Promise<T>
}

子類

  • ConnectableObservable
  • GroupedObservable
  • Subject
    • BehaviorSubject
    • ReplaySubject
    • AsyncSubject

靜態(tài)特性

屬性 類型 描述
創(chuàng)造 Function 通過調(diào)用 Observable 構(gòu)造函數(shù)創(chuàng)建一個(gè)新的 Cold Observable
如果 typeof iif
throw typeof throwError

建設(shè)者

constructor(subscribe?: (this: Observable<T>, subscriber: Subscriber<T>) => TeardownLogic)參量訂閱可選的。默認(rèn)值為 undefined。最初訂閱 Observable 時(shí)調(diào)用的函數(shù)。該函數(shù)被賦予一個(gè)訂閱者,可以為其輸入新值 next,或者 error 可以調(diào)用一個(gè)方法來引發(fā)錯(cuò)誤,或者 complete 可以調(diào)用一個(gè)方法 來通知成功完成。

物產(chǎn)

屬性 類型 描述
_isScalar boolean 內(nèi)部實(shí)現(xiàn)細(xì)節(jié),請(qǐng)勿直接使用。
資源 Observable<any>
算子 Operator<any, T>

方法

電梯() 創(chuàng)建一個(gè)新的 Observable,將其作為源,并將傳遞的運(yùn)算符定義為新的 Observable 的運(yùn)算符。 lift<R>(operator: Operator<T, R>): Observable<R>

參量: 類型:
算子 定義要執(zhí)行的操作的操作員
returnsObservable<R>:應(yīng)用了運(yùn)算符的新觀測(cè)值

訂閱() 調(diào)用 Observable 的執(zhí)行并注冊(cè) Observer 處理程序以獲取其發(fā)出的通知。 5重載...subscribe(observer?: PartialObserver<T>): Subscription

參量: 類型:
觀察者 可選的。默認(rèn)值為undefined。類型:PartialObserver

returnsSubscription

subscribe(next: null, error: null, complete: () => void): Subscription

參量: 類型:
下一個(gè) 類型:null
錯(cuò)誤 類型:null
完成 類型:() => void

returnsSubscription``subscribe(next: null, error: (error: any) => void, complete?: () => void): Subscription

參量: 類型:
下一個(gè) 類型:null
錯(cuò)誤 類型:(error: any) => void
完成 可選的。默認(rèn)值為undefined。類型:() => void

returns Subscription``subscribe(next: (value: T) => void, error: null, complete: () => void): Subscription

參量: 類型:
下一個(gè) 類型:(value: T) => void
錯(cuò)誤 類型:null
完成 類型:() => void

returnsSubscription``subscribe(next?: (value: T) => void, error?: (error: any) => void, complete?: () => void): Subscription

參量: 類型:
下一個(gè) 可選的。默認(rèn)值為undefined。類型:(value: T) => void
錯(cuò)誤 可選的。默認(rèn)值為undefined。類型:(error: any) => void
完成 可選的。默認(rèn)值為undefined。類型:() => void
returns Subscription

當(dāng)您擁有所有這些 Observable 時(shí),請(qǐng)使用它,但仍然沒有任何反應(yīng)。subscribe不是常規(guī)運(yùn)算符,而是調(diào)用 Observable 內(nèi)部 subscribe 函數(shù)的方法。例如,它可能是傳遞給 Observable 的構(gòu)造函數(shù)的函數(shù),但是在大多數(shù)情況下,它是庫實(shí)現(xiàn),它定義 Observable 將發(fā)出的內(nèi)容以及何時(shí)發(fā)出。這意味著調(diào)用 subscribe 實(shí)際上是 Observable 開始其工作的時(shí)刻,而不是通常被認(rèn)為是創(chuàng)建的時(shí)刻。除了開始執(zhí)行 Observable 之外,此方法還允許您偵聽 Observable 發(fā)出的值以及完成或發(fā)生錯(cuò)誤的時(shí)間。您可以通過以下兩種方式來實(shí)現(xiàn)。第一種方法是創(chuàng)建一個(gè)實(shí)現(xiàn) Observer 接口的對(duì)象。它應(yīng)該具有由該接口定義的方法,但是請(qǐng)注意,它應(yīng)該只是一個(gè)常規(guī)的 JavaScript 對(duì)象,您可以按照自己想要的任何方式(ES6 類,經(jīng)典函數(shù)構(gòu)造函數(shù),對(duì)象文字等)創(chuàng)建自己。特別是不要嘗試使用任何 RxJS 實(shí)現(xiàn)細(xì)節(jié)來創(chuàng)建觀察者-您不需要它們。還要記住,您的對(duì)象不必實(shí)現(xiàn)所有方法。如果發(fā)現(xiàn)自己創(chuàng)建了一種不執(zhí)行任何操作的方法,則可以簡(jiǎn)單地忽略它。但是請(qǐng)注意,如果 error 未提供該方法,則所有錯(cuò)誤都將保留。第二種方法是完全放棄 Observer 對(duì)象,僅提供回調(diào)函數(shù)代替其方法。這意味著您可以提供三個(gè)函數(shù)作為的參數(shù) subscribe,其中第一個(gè)函數(shù)等效于 next 方法,第二個(gè)函數(shù)等效于方法,error 第三個(gè)函數(shù)等效于 complete 方法。與 Observer 一樣,如果不需要監(jiān)聽某些內(nèi)容,則可以省略函數(shù),最好通過 undefinednull,因?yàn)?subscribe 可以通過將它們放在函數(shù)調(diào)用中的位置來識(shí)別它們。當(dāng)涉及到 error 功能時(shí),就像以前一樣(如果未提供),將拋出 Observable 發(fā)出的錯(cuò)誤。無論 subscribe 使用哪種調(diào)用方式,在兩種情況下都將返回 Subscription 對(duì)象。該對(duì)象允許您對(duì)其進(jìn)行調(diào)用unsubscribe,這將停止 Observable 所做的工作,并清除 Observable 使用的所有資源。請(qǐng)注意,取消訂閱不會(huì)調(diào)用 complete 提供給 subscribe 函數(shù)的回調(diào),該回調(diào)保留給來自 Observable 的常規(guī)完成信號(hào)。請(qǐng)記住,提供給的回調(diào) subscribe 不能保證被異步調(diào)用。它是一個(gè) Observable 本身,它決定何時(shí)調(diào)用這些函數(shù)。例如 of ,默認(rèn)情況下會(huì)同步發(fā)出其所有值。始終檢查文檔以了解給定的 Observable 在訂閱時(shí)的行為,以及是否可以使用修改其默認(rèn)行為 scheduler

訂閱觀察者

import { of } from 'rxjs';


const sumObserver = {
  sum: 0,
  next(value) {
    console.log('Adding: ' + value);
    this.sum = this.sum + value;
  },
  error() {
    // We actually could just remove this method,
    // since we do not really care about errors right now.
  },
  complete() {
    console.log('Sum equals: ' + this.sum);
  }
};


of(1, 2, 3) // Synchronously emits 1, 2, 3 and then completes.
  .subscribe(sumObserver);


// Logs:
// "Adding: 1"
// "Adding: 2"
// "Adding: 3"
// "Sum equals: 6"

訂閱功能

import { of } from 'rxjs'


let sum = 0;


of(1, 2, 3).subscribe(
  value => {
    console.log('Adding: ' + value);
    sum = sum + value;
  },
  undefined,
  () => console.log('Sum equals: ' + sum)
);


// Logs:
// "Adding: 1"
// "Adding: 2"
// "Adding: 3"
// "Sum equals: 6"

取消訂閱

import { interval } from 'rxjs';


const subscription = interval(1000).subscribe(
  num => console.log(num),
  undefined,
  () => {
    // Will not be called, even when cancelling subscription.
    console.log('completed!');
  }
);


setTimeout(() => {
  subscription.unsubscribe();
  console.log('unsubscribed!');
}, 2500);


// Logs:
// 0 after 1s
// 1 after 2s
// "unsubscribed!" after 2.5s

_trySubscribe() _trySubscribe(sink: Subscriber<T>): TeardownLogic

參量 類型
sink Subscriber
returnsTeardownLogic

forEach()
forEach(next: (value: T) => void, promiseCtor?: PromiseConstructorLike): Promise<void>參量下一個(gè)可觀察對(duì)象發(fā)出的每個(gè)值的處理程序 PromiseCtor 可選的。默認(rèn)值為 undefined。用于實(shí)例化 Promise 的構(gòu)造函數(shù)
Promise<void>:一個(gè)承諾,可以解決可觀察的完成,或者拒絕已處理的錯(cuò)誤

pipe()
用于將功能運(yùn)算符縫合在一起。 -
11 overloads...pipe(): Observable<T>參量沒有參數(shù)。

returns`Observable

`pipe<A>(op1: OperatorFunction<T, A>): Observable<A>

參量 類型
op1 類型:OperatorFunctionreturns`Observable<A>``pipe<A, B>(op1: OperatorFunction<T, A>
op2 OperatorFunction<A, B>): Observable<B>`
參量 類型
op1 類型:OperatorFunction
op2 類型:OperatorFunctionreturnsObservable|<B>``pipe<A, B, C>(op1: OperatorFunction<T, A>, op2: OperatorFunction<A, B>, op3: OperatorFunction<B, C>): Observable<C>
參量 類型
op1 類型:OperatorFunction
op2 類型:OperatorFunction
op3 類型:OperatorFunctionreturns`Observable

<C>`pipe<A, B, C, D>(op1: OperatorFunction<T, A>, op2: OperatorFunction<A, B>, op3: OperatorFunction<B, C>, op4: OperatorFunction<C, D>): Observable<D>

參量 類型
p1 類型:OperatorFunction
op2 類型:OperatorFunction
op3 類型:OperatorFunctionop4
類型: OperatorFunctionreturnsObservable|<D>``pipe<A, B, C, D, E>(op1: OperatorFunction<T, A>, op2: OperatorFunction<A, B>, op3: OperatorFunction<B, C>, op4: OperatorFunction<C, D>, op5: OperatorFunction<D, E>): Observable<E>
參量 類型
op1 類型:OperatorFunction
op2 類型:OperatorFunction
op3 類型:OperatorFunction
op4 類型:OperatorFunction
op5 類型:OperatorFunctionreturns`Observable

<E>`pipe<A, B, C, D, E, F>(op1: OperatorFunction<T, A>, op2: OperatorFunction<A, B>, op3: OperatorFunction<B, C>, op4: OperatorFunction<C, D>, op5: OperatorFunction<D, E>, op6: OperatorFunction<E, F>): Observable<F>

參量 類型
op1 類型:OperatorFunction
op2 類型:OperatorFunction
op3 類型:OperatorFunction
op4 類型:OperatorFunction
op5 類型:OperatorFunction
op6 類型:OperatorFunctionreturns`Observable

<F>`pipe<A, B, C, D, E, F, G>(op1: OperatorFunction<T, A>, op2: OperatorFunction<A, B>, op3: OperatorFunction<B, C>, op4: OperatorFunction<C, D>, op5: OperatorFunction<D, E>, op6: OperatorFunction<E, F>, op7: OperatorFunction<F, G>): Observable<G>

參量 類型
op1 類型:OperatorFunction
op2 類型:OperatorFunction
op3 類型:OperatorFunction
op4 類型: OperatorFunction
op5 類型: OperatorFunction
op6 類型: OperatorFunction
op7 類型:OperatorFunctionreturns`Observable

<G>`pipe<A, B, C, D, E, F, G, H>(op1: OperatorFunction<T, A>, op2: OperatorFunction<A, B>, op3: OperatorFunction<B, C>, op4: OperatorFunction<C, D>, op5: OperatorFunction<D, E>, op6: OperatorFunction<E, F>, op7: OperatorFunction<F, G>, op8: OperatorFunction<G, H>): Observable<H>

參量 類型
op1 類型:OperatorFunction
op2 類型:OperatorFunction
op3 類型:OperatorFunction
op4 類型:OperatorFunction
op5 類型:OperatorFunction
op6 類型:OperatorFunction
op7 類型:OperatorFunction
op8 類型:OperatorFunctionreturns`Observable

<H>`pipe<A, B, C, D, E, F, G, H, I>(op1: OperatorFunction<T, A>, op2: OperatorFunction<A, B>, op3: OperatorFunction<B, C>, op4: OperatorFunction<C, D>, op5: OperatorFunction<D, E>, op6: OperatorFunction<E, F>, op7: OperatorFunction<F, G>, op8: OperatorFunction<G, H>, op9: OperatorFunction<H, I>): Observable<I>

參量 類型
op1 類型:OperatorFunction
op2 類型:OperatorFunction
op3 類型:OperatorFunction
op4 類型:OperatorFunction
op5 類型:OperatorFunction
op6 類型:OperatorFunction
op7 類型:OperatorFunction
op8 類型:OperatorFunction
op9 類型:OperatorFunctionreturns`Observable

<I>`pipe<A, B, C, D, E, F, G, H, I>(op1: OperatorFunction<T, A>, op2: OperatorFunction<A, B>, op3: OperatorFunction<B, C>, op4: OperatorFunction<C, D>, op5: OperatorFunction<D, E>, op6: OperatorFunction<E, F>, op7: OperatorFunction<F, G>, op8: OperatorFunction<G, H>, op9: OperatorFunction<H, I>, ...operations: OperatorFunction<any, any>[]): Observable<{}>

參量 類型
p1 類型:OperatorFunction
op2 類型:OperatorFunction
op3 類型:OperatorFunction
op4 類型:OperatorFunction
op5 類型:OperatorFunction
op6 類型:OperatorFunction
op7 類型:OperatorFunction
op8 類型:OperatorFunction
op9 類型:OperatorFunction
運(yùn)作 類型:OperatorFunction[]returnsObservable<{}>

承諾() 3重載...toPromise<T>(): Promise<T>參量沒有參數(shù)。returnsPromise<T>``toPromise<T>(PromiseCtor: any): Promise<T>

參量 類型
承諾者 類型:any

returnsPromise<T>``toPromise<T>(PromiseCtor: PromiseConstructorLike): Promise<T>

參量 類型
承諾者 類型:PromiseConstructorLike。returnsPromise<T>
以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)