EBIA

Tag: observable

Observables

Observables vs. Functions

Observables are lazy Push collections of multiple values.

Observables are like functions with zero arguments, but generalize those to allow multiple values. Subscribing to an Observable is analogous to calling a Function. Observables are able to deliver values either synchronously or asynchronously.

What is the difference between an Observable and a function? Observables can “return” multiple values over time, something which functions cannot.

Conclusion:

  • func.call() means “give me one value synchronously
  • observable.subscribe() means “give me any amount of values, either synchronously or asynchronously

Anatomy of an Observable

Observables are created using Rx.Observable.create or a creation operator, are subscribed to with an Observer, execute to deliver next / error / complete notifications to the Observer, and their execution may be disposed.

Observables can be created with create, but usually we use the so-called creation operators, like of, from, interval, etc.

In an Observable Execution, zero to infinite Next notifications may be delivered. If either an Error or Complete notification is delivered, then nothing else can be delivered afterwards.

When you subscribe, you get back a Subscription, which represents the ongoing execution. Just call unsubscribe() to cancel the execution.

Observer

An Observer is a consumer of values delivered by an Observable. Observers are simply a set of callbacks, one for each type of notification delivered by the Observable: next, error, and complete.

The following is an example of a typical Observer object:

var observer = {
  next: x => console.log('Observer got a next value: ' + x),
  error: err => console.error('Observer got an error: ' + err),
  complete: () => console.log('Observer got a complete notification'),
};

To use the Observer, provide it to the subscribe of an Observable:

observable.subscribe(observer);

Subscription

A Subscription is an object that represents a disposable resource, usually the execution of an Observable. A Subscription has one important method, unsubscribe, that takes no argument and just disposes the resource held by the subscription. In previous versions of RxJS, Subscription was called “Disposable”.

Subscriptions can also be put together, so that a call to an unsubscribe() of one Subscription may unsubscribe multiple Subscriptions. You can do this by “adding” one subscription into another:

var observable1 = ........
var observable2 = ........

var subscription = observable1.subscribe(...
var childSubscription = observable2.subscribe(...

subscription.add(childSubscription);

setTimeout(() => {
  // Unsubscribes BOTH subscription and childSubscription
  subscription.unsubscribe();
}, 1000);

Subscriptions also have a remove(otherSubscription) method, in order to undo the addition of a child Subscription.
>> source

RxJS revisited

>> source

Flow Control Operators

filter, delay, debounceTime, take, takeUntil, distinct, distinctUntilChanged, throttleTime

throttleTime

Allow at most one click per second:

var button = document.querySelector('button');
Rx.Observable.fromEvent(button, 'click')
  .throttleTime(1000)
  .scan(count => count + 1, 0)
  .subscribe(count => console.log(`Clicked ${count} times`));

Value Producing Operators

pluck, pairwise, sample,

Simple RxJS Examples

import * as Rx from "rxjs";

let myArray = [1,2,'3','foo', 'bar', 'phi', 3,4,5, '7'];

let stream$ = Rx.Observable.interval(300).take(10)
    .map (x => parseInt(myArray[x]))
    .filter(x => !isNaN(x))
    .reduce((i,j) => {
    console.log(`Addition von ${i} mit ${j} = ${i+j}`);
    return i+j;
},0);

let result$ = stream$;

result$.subscribe(
    x => console.log(x),
    err => console.log(err),
    () => console.log ('done')
);

Angular Testing 4+ Keywords

  • Isolated, Shared, Integration, Unit, E2E End to End Tests,
  • Mocks, Stubs, Spies
  • Sync, Async
  • Jasmine, suites, specs, expectations, matchers, tricks (.toEqual, ¬†.toBe,..), beforeEach, afterEach, beforeAll, afterAll, refactoring repetitive code into the setup,
  • Angular, Components, Services, Http, Mock-Backend, Directives, Pipes, Routes, Observables,¬†TestBed, fixtures, async and fakeAsync/tick, jasmine.done

Copyright © 2020 EBIA

Theme by Anders NorenUp ↑