zoukankan      html  css  js  c++  java
  • [RxJS] map vs flatMap

    What's the difference between map and flatmap? First, let's show what map is. To show that, I need a source stream, so I'm going to make an interval. It takes a tenth of a second, and I'm only going to take 10 values, and subscribe to it.

    var source = Rx.Observable.interval(100).take(10).map((x) => x*2);
    console.clear();
    source.subscribe(function(res){
      console.log(res);
    });
    
    /*
    0
    2
    4
    6
    8
    10
    12
    14
    16
    18
    */

    But what happens if I want to do something asynchronous in here? To show this, I'm going to return an observable timer, which is just going to wait for half of a second, and then map to exactly the same values.

    var source = 
        Rx.Observable.interval(100).take(10)
        .map(function(x){
          return Rx.Observable.timer(100).map(function(){
            return x;
          });
        });
    console.clear();
    source.subscribe(function(res){
      console.log(res.toString());
    });
    
    /*
    "[object Object]"
    "[object Object]"
    "[object Object]"
    "[object Object]"
    "[object Object]"
    "[object Object]"
    "[object Object]"
    "[object Object]"
    "[object Object]"
    "[object Object]"
    */

    'Rx.Observable.timer(100)' causes it delay 100 ms.

    You find You're going to get objects back. That's because these objects are observables. I'd really, really like to get my values back into my stream. There's actually two ways to do this. 

    First Way: mergerAll()

    What a merge all does is, it takes in a stream of observables, or an observable of observables, and merges them together as they come in.

    It subscribes to each one, and pumps them into one output stream. 

    var source = 
        Rx.Observable.interval(100).take(10)
        .map(function(x){
          return Rx.Observable.timer(100).map(function(){
            return x;
          });
        }).mergeAll();
    console.clear();
    source.subscribe(function(res){
      console.log(res.toString());
    });
    
    /*
    "0"
    "1"
    "2"
    "3"
    "4"
    "5"
    "6"
    "7"
    "8"
    "9"
    */

    Second way: flatMap()

    What flatmap is going to do is it's going to perform this mapping function and then subscribe to each observable returned by the map.

    var source = 
        Rx.Observable.interval(100).take(10)
        .flatMap(function(x){
          return Rx.Observable.timer(100).map(function(){
            return x;
          });
        });
    console.clear();
    source.subscribe(function(res){
      console.log(res.toString());
    });
  • 相关阅读:
    vue
    vue
    vue 中使用style(样式)
    vue 中使用class(样式)
    第17课
    第16课
    第15课
    第14课
    第13课
    第12课
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4789763.html
Copyright © 2011-2022 走看看