[譯] RxJS文檔02—— Observable 可觀察量

A Loity 發布于2019-08-20 17:30 / 1920人閱讀

摘要：原文可觀察量是一種能惰性推送的集合，他可以包含多個值。是一種惰性計算方式，會在迭代中同步的返回到無限個可能的話返回值。使用一種處理方法，最終可能會或可能不會返回一個值。無論是同步方式還是異步方式，都可以擇其一來傳遞返回值。

原文：http://reactivex.io/rxjs/manu...

Observable

可觀察量是一種能惰性推送的集合，他可以包含多個值。下面的表格對比了推送和拉取2種方式：

	單值	多值
拉取	Function	Iterator
推送	Promise	Observable

舉例來說，下列Observable 在被訂閱之后會立即推送(同步)值1,2,3，而值4將會在1秒之后被推送到訂閱者，之后這個流進入完成狀態:

var obserable = Rx.Observable.create(function(observer){   //注意參數的命名
 observer.next(1);
 observer.next(2);
 observer.next(3);
 
 setTimeout(function(){
     observer.next(4);
     observer.complete();
 },1000);
 
});

為了調用以上的Observable并輸出其中的值，需要訂閱這個流:

console.log("just before subscribe");
observable.subscribe({
 next:x => console.log("got value:",x),
 error:err => console.log("something wrong occurred: " + err),
 complete:() => console.log("done")
});
console.log("just after subscribe");

執行之后會輸出:

just before subscribe
got value 1
got value 2
got value 3
just after subscribe
got value 4
done

pull vs push 拉取 vs 推送

拉取和推送是數據生產者和數據使用者之間進行數據交換的2種形式。

什么是拉取？

在拉取系統中，數據使用者決定何時從數據生產者那里接收數據。數據生產者自身并不知道數據何時會被傳遞給使用者。

每一個js函數都是一個拉取系統。函數是一個數據生產者，通過在別處被調用，他返回的單一值將會被投入計算。

ES2015又引入了新的拉取系統，generator和迭代器(function*)。調用iterator.next()來消費從迭代器(數據生產者)中拉取到的數據。

	Producer	Consumer
Pull	被動的：被請求的時候返回數據	主動的：決定數據何時被請求
Push	主動的：按照自己的步驟返回數據	被動的：接收的數據后作出反應

什么是推送？

在推送系統中，數據生產者決定何時把數據推送給使用者，使用者自己并不知道何時能夠接收到數據。

Promise是當今js中最常見的一種推送系統。和函數不同，Promise(數據生產者)精確的控制時機，將數據“推送”給業已注冊的回調函數(數據使用者)。

RxJS引入了Observables，一個新的JS推送系統。

一個Observable是一個包含多個值的“數據生產者”，它會將數據推送給Observer(數據使用者)。

A Function is a lazily evaluated computation that synchronously returns a single value on invocation.
A generator is a lazily evaluated computation that synchronously returns zero to (potentially) infinite values on iteration.
A Promise is a computation that may (or may not) eventually return a single value.
An Observable is a lazily evaluated computation that can synchronously or asynchronously return zero to (potentially) infinite values from the time it"s invoked onwards.

Function是一種惰性計算方式，當他被調用時會同步的返回一個值。

generator是一種惰性計算方式，會在迭代中同步的返回0到無限個（可能的話）返回值。

Promise使用一種處理方法，最終可能會（或可能不會）返回一個值。

Observable是一種惰性處理方法，當被調用的時候，可以同步也可以異步的返回0到無限個（可能的話）返回值。

理解Observable

有別于流行的說法，Observable既不像多個EventEmitter，也不像一種能返回多個值的Promise。

在一些場合，比如廣播消息時，Observer看起來很像EventEmitter，在RxJS中，被稱為Subject。而在大多數情況下，Observable并不像EventEmitter。

Observables 像一群沒有參數的函數，形成了多個值的集合。

考慮以下情況：

function foo() {
  console.log("Hello");
  return 42;
}

var x = foo.call(); // same as foo()
console.log(x);
var y = foo.call(); // same as foo()
console.log(y);

輸出是:

"Hello"
42
"Hello"
42

用Observables重寫上面的行為是：

var foo = Rx.Observable.create(function(observer){
    console.log("Hello");
    observer.next(42);
});

foo.subscribe(function(x){
    console.log(x);
});

foo.subscribe(function(y){
    console.log(y);
});

上面2種情況其實是由于函數和Observable都是一種惰性的計算。如果你不調用函數，那么console.log("Hello")就不會被執行，也不會有輸出。同樣的，只用當“調用”（通過subscribe訂閱）Observable，才會有輸出。

此外，調用和訂閱都是孤立運行的。2個函數分別被調用會產生2個效果，2個Observable訂閱者會產生2個獨立的效果。
不像EventEmitter會派發它的狀態并且不論是否有訂閱者都會執行那樣，Observable不會派發狀態而且是惰性的。

訂閱observable，類似于調用一個函數

有些聲音宣稱Observable是異步的，這是不對的。如果你使用一個函數來輸出日志，像這樣:

console.log("before");
console.log(foo.call());
console.log("after");

輸出是:

"before"
"Hello"
42
"after"

同樣的行為，使用Observable：

console.log("before");
foo.subscribe(function(x){
    console.log("Hello");
    return x;
});
console.log("after");

輸出是一樣的:

"before"
"Hello"
42
"after"

以上證明了訂閱foo之后，效果和函數一樣，都是同步的。

無論是同步方式還是異步方式，obsverable都可以擇其一來傳遞返回值。

Observable和函數之間有什么區別？Observables可以隨著時間線返回多個值，函數卻不能，因此你可以這樣:

function foo() {
  console.log("Hello");
  return 42;
  return 100; // dead code. will never happen
}

函數返回單一的值，Observables卻可以這樣：

var foo = Rx.Observable.create(function(observer){
    console.log("hello");
    observer.next(42);
    observer.next(100);
    observer.next(200);
});

console.log("before");
foo.subscribe(function(x){
    console.log(x);
});
console.log("after");

同步式的輸出:

"before"
"Hello"
42
100
200
"after"

也可以使用異步式的輸出:

var foo = Rx.Observable.create(function(observer){
    console.log("Hello");
    observer.next(42);
    observer.next(100);
    observer.next(200);
    
    setTimeout(function(){
        observer.next(300);
    },1000);
});

console.log("before");
foo.subscribe(function(x){
    console.log(x);
});
console.log("after");

輸出為:

"before"
"Hello"
42
100
200
"after"
300

結論:

func.call()意味著“同步的返回一個值”。

observable.subscribe()意思是“返回任意數量的值，同步式、異步式二擇其一。”

GPU云服務器云服務器 Observable RxJS 引入rxjs Rxjs_Subject

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83629.html

[譯]RxJS文檔01——介紹

摘要：原文是一個使用可觀察量隊列解決異步編程和基于事件編程的庫。提供了幾個管理異步事件的核心概念可觀察量，代表了一個由未來獲取到的值或事件組成的集合。相當于事件觸發器，是向多個廣播事件或推送值的唯一方法。原文:http://reactivex.io/rxjs/manu... RxJS 是一個使用可觀察量(observable)隊列解決異步編程和基于事件編程的js庫。他提供了一個核心的類型O...

BlackHole1 2019-08-20 17:30 評論0 收藏0
[譯]RxJS文檔04——Observer 觀察者

摘要：原文什么是觀察者是流推送數據的用戶。觀察者們就是一組函數的集合，監聽著每一個流推送出的不同類型的通知，包括和。如果沒有為某個類型的通知提供，流的執行過程仍然會照常進行，但是響應的通知將會被忽略，因為觀察者沒有提供相應的來接收。原文: http://reactivex.io/rxjs/manu... 什么是Observer？觀察者(Observer)是Observable流推送數據的...

xiaolinbang 2019-08-20 17:30 評論0 收藏0
[譯]RxJS文檔03——剖析Observable

摘要：通過執行和可以向訂閱者推送不同的通知。之后，執行過程可能被處理掉。當調用并得到觀察者時，在中傳入的函數將會被執行。每次執行都會觸發一個單獨針對當前的運行邏輯。通知不發出任何值，表示流的結束。原文:http://reactivex.io/rxjs/manu... Rx.Observalbe.create()或者創建操作符，可以創建（created） Observable流。Obser...

netScorpion 2019-08-20 17:30 評論0 收藏0
[譯]RxJS06——Subject

摘要：舉例來說，每年都有生日是一道數據流，但是一個人的年齡卻是一個流。運行結果顯示，第二個在訂閱之后，獲得了數據流中最后毫秒事件內產生的和三個值。原文:http://reactivex.io/rxjs/manu... Subject是什么？ RxJS的Subject是Observable的一個特殊類型，他可以將流中的值廣播給眾多觀察者(Observer)。一般的Observalbe流是單一...

gitmilk 2019-08-20 17:29 評論0 收藏0
[譯] RxJS文檔05——Subscription

摘要：原文什么是是一個對象，表示一種可被處置的資源，通常指代一個流的執行過程。在之前版本中的，被稱為可被處置的。本質是一個含有方法，用來釋放資源或者取消流執行的對象。原文: http://reactivex.io/rxjs/manu... 什么是Subscription? Subscription是一個對象，表示一種可被處置的資源，通常指代一個Observable流的執行過程。 Subsc...

walterrwu 2019-08-20 17:30 評論0 收藏0