[RxJS] Combination operators: concat, startWith

Posted 2020-07-12 Answer1215

Some Observables may complete, and we may want to append another Observable to the one which just completed. This lesson teaches you how to use the concat() operator for either appending or prepending, and how the shortcut operator startWith() is an easy way of prepending values to an Observable.

 

 concat(observalbe): wait until the first observalbe complete than append the scond observable result. 

var foo = Rx.Observable.interval(100).take(7);
var more = Rx.Observable.of(10,11,12,13,14);

/*
--0--1--2--3--4--5--6--7-...
    take(7)
                     (10,11,12,13,14|)       (more)
--0--1--2--3--4--5--6|                       (foo)
   concat
--0--1--2--3--4--5--6|(10,11,12,13,14)|
*/

var bar = foo.concat(more);

bar.subscribe(
  function (x) { console.log(‘next ‘ + x); },
  function (err) { console.log(‘error ‘ + err); },
  function () { console.log(‘done‘); },
);

  /*
  "next 0"
"next 1"
"next 2"
"next 3"
"next 4"
"next 5"
"next 6"
"next 10"
"next 11"
"next 12"
"next 13"
"next 14"
"done"
  */

 

Observable.concat(first$, second$): static way to concat:

var foo = Rx.Observable.interval(100).take(7);
var more = Rx.Observable.of(10,11,12,13,14);

/*
--0--1--2--3--4--5--6--7-...
    take(7)
                     (10,11,12,13,14|)       (more)
--0--1--2--3--4--5--6|                       (foo)
   concat
--0--1--2--3--4--5--6|(10,11,12,13,14)|
*/

var bar = Rx.Observable.concat(foo, more);

bar.subscribe(
  function (x) { console.log(‘next ‘ + x); },
  function (err) { console.log(‘error ‘ + err); },
  function () { console.log(‘done‘); },
);

The code return the same result as the code showing before.

 

startWith(value):

var foo = Rx.Observable.interval(100).take(7);


/*
--0--1--2--3--4--5--6--7-...
    take(7)
--0--1--2--3--4--5--6|                       (foo)
   startWith(‘more‘)
(‘more‘)--0--1--2--3--4--5--6|
*/

var bar = foo.startWith(‘more‘);

bar.subscribe(
  function (x) { console.log(‘next ‘ + x); },
  function (err) { console.log(‘error ‘ + err); },
  function () { console.log(‘done‘); },
);

  /*
"next more"
"next 0"
"next 1"
"next 2"
"next 3"
"next 4"
"next 5"
"next 6"
"done"
  */