RxJS API解析（一）

姘擱『發布于2019-08-19 17:23 / 504人閱讀

摘要：選擇后，僅有聯通的可觀察對象會被觀察到。從外部看，所有訂閱者僅能觀測到這個聯通了支流。，其中表示輸入流，是操作符，是最后的輸出流。截圖驗證一下當一個流被聯通后，其他的流腫么辦先記住結論未被選擇的流將被調用方法，也就是說，他們被終止了。

起因

在SegmentFault里發布過一篇RxJS的簡明教程，很多人反饋對這個主題很是很感興趣，詳見RxJS簡明教程。

Rx 是一種編程的思維，而不是一個特定的框架或庫。RxJS是Rx*基于Javascript語言棧的實現。
我決定，今后寫一系列“深入淺出”的文章來介紹 Rx*。我選擇RxJS作為base，所有的代碼實例都會基于RxJS，這一系列文章主要會涉及以下幾個方面：

我對Rx的理解，和使用中的感悟，不會拘泥于前端或是服務端。

對Rx*標準：對象、方法（API）的闡述，這部分相當于對API文檔的翻譯。

這個系列，堅持原創和對國外優秀材料的翻譯。當然這是個浩大的工程，希望我可以堅持完成。

Rx* (Observable.amb & Observable#amb)

注：Object.method為對象方法，Object#method為實例方法

方法定義

[Rx.Observable.amb(...args)]

作用

從一系列流中，訂閱最先發射的值的可觀察對象并忽略其他的可觀察對象。

參數

args (Array|arguments)：方法參數為多個可觀察對象（流），或者是Promise對象，對象間存在競爭關系。

返回值

(Observable) ：方法返回呈競爭態的多個可觀察對象中，首先發射的可觀察對象。

總結

簡單的說，amb()像一個多路電閘，一次僅能構建一條通路：

| | | | | | | |
A B C D E F G H
| | | | | | | |
     
         開關臂
          
       |
      主線
       |

函數需要做出選擇，選擇的依據就是哪一個可觀察對象（流）先發射了值。選擇后，僅有“聯通”的可觀察對象會被觀察到。還是用電路做比喻，其中“ * ”表示電子：

*
| | | | | | |
    *
| | | | | | |
A B C D E F G
| | | | | | |
          *
| | | | | | |
  *
| | | | | | |
        *

可以看到，E支流的電子先到達了末端，所以E路被接通。從外部看，所有訂閱者僅能觀測到這個聯通了E支流。

Rx官方喜歡使用珠寶圖來解釋各個操作符（函數）的作用，珠寶圖表示amb()。

介紹一下牛逼的 珠寶圖 ：

從左到右的箭頭，代表時間軸。|代表可觀察對象（流）發出了完成信號。
軸上的每一個珠寶代表流發射的值；

下方amd那個層是處理操作符，本圖意味著所有操作符以上的流，都會經過操作符的處理（操作符以上的流為操作符的操作數）；

最下方，是操作符處理后的輸出結果。
y = f(x)，其中x表示輸入流，f()是操作符，y是最后的輸出流。

觀察上面的珠寶圖，1, 2, 3這條時間軸上的可觀察對象發射了值1，所以amb()選擇了它作為最終輸出的可觀察對象。接下來如果它被訂閱，訂閱者會依次收到1,2 和 3。

當然，珠寶圖不是靜態的擺設 ！珠寶圖不是靜態的擺設 ！珠寶圖不是靜態的擺設！
我們可以拖動上面的每一個珠寶，來改變流中可觀察對象的發射順序：

我們拖動第一個時間軸——20, 40, 60上的可觀察對象，把20這個珠寶拖到所有的珠寶前面（讓其最先發射）。
依照amb()操作符的定義，我們可以推斷，輸出會變為20, 40, 60。截圖驗證一下：

當一個流被聯通后，其他的流腫么辦？先記住結論：未被選擇的流將被調用dispose方法，也就是說，他們被終止了。

實例

HTML

JavaScript

input1 = $("#input1");
input2 = $("#input2");

var source = Rx.Observable.amb(
  Rx.Observable.fromEvent(input1, "click")
                              .map(()=>"one"),
  Rx.Observable.fromEvent(input2, "click")
                              .map(()=>"two")
);

上面例子中，amb()中傳入了兩個點擊事件流。事件流1，會在點擊后發射字符串one；事件流2，會在點擊后發射字符串two；

初始情況下，產生事件流1之后，事件流2不會再被輸出；反之亦然，我們可以訂閱amb()產生的結果流：

var subscription = source.subscribe(
    function (x) {
        console.log(x);
    },
    function (err) {
        console.log("Error: " + err);   
    },
    function () {
        console.log("Completed");   
    });

具體可演示實例，可以進入amb()操作符演示。訂閱結果會在控制臺中輸出。
當然，你可以在充分理解了amb()的原理之后修改可演示實例，驗證自己的掌握程度。

題外話

上文提到過 Rx 是一種編程模式，幾乎各個平臺、語言棧都有實現。我們試著探討下amb()更寬泛地應用：

秒殺系統 ：秒殺是一個高并發的場景，出現“多賣”是常態，“多賣”是由于秒殺商品的庫存同步問題引起的。參與秒殺的用戶呈競爭態，將請求分組后（比如100個一組），通過amd()可以甄選出具有購買資格的用戶：因為秒殺的產品邏輯是：誰手快，誰買到。

Observable.amb(
    用戶A的拍下請求,
    用戶B的拍下請求,
    用戶C的拍下請求,
    ...
).subscribe(function(user) {
    執行購買邏輯，創建訂單，打開支付工具
})

移動電話：假設同一時間多個人呼叫你，你接通了最先到達的來電，這段時間內你就只能和他（她、它）通話了，其余呼叫者將會接收到忙音（對不起，你所呼叫的用戶正在通話中，請稍后再撥）。

Observable.amb(
    A來電,
    B來電,
    C來電,
    ...
).subscribe(function(call) {
    通話吧啦吧啦
})

劇終

云服務器 GPU云服務器 RxJS 引入rxjs 云解析api Rxjs_Subject

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

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

RxJS API解析（四）

摘要：任何程序設計語言在講解遞歸特性時，基本都會舉漢諾塔斐波拉契數列的例子。沒錯，請你對比一下斐波拉契數列和定義的相似之處遞歸完成后產生值的過程就是的過程。 Rx*(Observable.combineLatest)方法方法定義 Rx.Observable.combineLatest(...args, [resultSelector]) 作用通過處理函數總是將指定的可觀察對象序列中最新發...

cheng10 2019-08-19 17:28 評論0 收藏0
RxJS API解析（三）

摘要：題外話服務可用性是指，服務提供者需要保證服務在任何時間情況下正確地提供。然后服務提供者，會將驗證碼發送到用戶手機。 Rx* (Observable.catch)方法方法定義 Rx.Observable.catch(...args) 作用序列中可觀察對象因為異常而被終止后，繼續訂閱序列中的其他可觀察對象。參數 args (Array | arguments): 可觀察對象序列。返...

banana_pi 2019-08-19 17:25 評論0 收藏0
RxJS API解析（二）

摘要：當無法匹配時，該對象被默認返回。如果沒有明確指定，將返回附加了指定的對象。返回值返回值為經過選擇后的可觀察對象。題外話鍵值對，可以對值進行命名。鍵值對是對象的組成部分，鍵名可以方便進行查找和比較操作。 Rx* (Observable.case)方法方法定義 [Rx.Observable.case(selector, sources, [elseSource|scheduler])] ...

chanthuang 2019-08-22 11:00 評論0 收藏0
Rxjs 響應式編程-第二章：序列的深入研究

摘要：接下來，我們將實現一個真實的應用程序，顯示幾乎實時發生的地震。得到的由表示，其中包含和的合并元素。如果不同同時傳出元素，合并序列中這些元素的順序是隨機的。是操作序列的強大操作符。但是的方法仍在運行，表明取消并不會取消關聯的。 Rxjs 響應式編程-第一章：響應式Rxjs 響應式編程-第二章：序列的深入研究Rxjs 響應式編程-第三章: 構建并發程序Rxjs 響應式編程-第四章構建完整...

姘擱『 2019-08-23 10:55 評論0 收藏0
RxJS 6有哪些新變化？

摘要：有哪些新變化于年月日正式發布，為開發人員帶來了一些令人興奮的增補和改進。不要移除包，直到你將所有的鏈式操作修改為管道操作符。 RxJS 6有哪些新變化？ RxJs 6于2018年4月24日正式發布，為開發人員帶來了一些令人興奮的增補和改進。Ben Lesh, rxJS核心開發成員，強調： RxJS 6在擁有更小API的同時，帶來了更整潔的引入方式提供一個npm包，該package可...

LeanCloud 2019-08-22 17:24 評論0 收藏0