Promises, promises, and then observables

Promises,
Promises, and
then Observables
A quick introduction into promises and
observables by Stefan Charsley

So many broken
promises
Just like every single new years resolution

What are Promises?
● Promises are a proxy object that represent the eventual completion or failure of an
asynchronous operation and its result.
● Promises have three states:
○ pending - the operation has not yet completed or failed (initial state)
○ fulfilled - the operation has completed
○ rejected - the operation failed
● Each Promise can only be “settled” (fulfilled or rejected) once

How are Promises created?
Promises can be created by our code or by 3rd party code for us to consume.
To create Promises we can use the constructor which takes a function as a parameter.
The function we pass will be called with two parameters, resolve and reject.
resolve and reject are both functions, and when called they set the state of the Promise to either
fulfilled or rejected respectively.
const myPromise = new Promise((resolve, reject) => {
// Our super complex asynchronous call that
// requires a new supercomputer
setTimeout(() => resolve('im done haha'), 0);
});

How are Promises used?
Promises are used by attaching handler functions using the then, catch, and finally functions
available on the Promise object instance. These handlers are executed in the order they are
attached.
const myFulfilledPromise = new Promise((resolve, reject) => {
setTimeout(() => resolve('im done haha'), 0);
});
// Will print out: im done haha
myFulfilledPromise.then((value) => console.log(value));
const myRejectedPromise = new Promise((resolve, reject) => {
setTimeout(() => reject(new Error('oh noes')), 0);
});
// Will print out: oh noes
myRejectedPromise.catch((error) => console.log(error.message));

Example
// Using fetch api which returns a promise
const myFetchPromise = fetch('http://example.com/movies.json');
const myDataPromise = myFetchPromise.then((response) => response.json());
myDataPromise.then((data) => console.log(data));
myDataPromise.catch((error) => console.log(error));
// You can also chain .then(), .catch(), and .finally()
// to attach multiple handlers at the same time
const myFetchPromise = fetch('http://example.com/movies.json')
.then((response) => response.json())
.then((data) => console.log(data))
.catch((error) => console.log(error));

Bonus example (async/await)
// Marking functions as async, you can use the await keyword
// and take advantage of try catch
async function doSomeWork() {
try {
const response = await fetch('http://example.com/movies.json');
const data = await response.json();
console.log(data);
} catch (error) {
console.log(error);
}
}

Questions?
None? Okay! Let’s move on!

Observe my terrible
code
It works on my machine

ReactiveX?
The ReactiveX learning curve:
Source:
https://twitter.com/hoss/status/742643506536153088

So what is ReactiveX programming?
● Everything is a stream of data/events
● Made up of observables and observers
● Combines the advantages of iterators with the flexibility of event-based asynchronous
programming
● Similar but different to functional reactive programming
○ Functional reactive programming operates on values that change continuously over time, while
ReactiveX operates on discrete values that are emitted over time.

What is an Observable?
An observable represents a stream of data that can arrive over time.
They can be created from anything but most often from DOM events and HTTP requests.
Observables don’t do anything and don’t activate a producer (like adding an event handler) until
there is a Subscription.
// import the fromEvent operator
import { fromEvent } from 'rxjs';
// grab button reference
const button = document.getElementById('myButton');
// create an observable of button clicks
const myObservable = fromEvent(button, 'click');

Subscriptions? Like Netflix? Not quite.
Subscriptions can be thought of as similar to Promise handlers, except that Subscribing to an
Observable actually activates the Observable.
Think of subscriptions like turning on the water tap, when you need the water you turn
(subscribe) the tap and the water begins to flow.
// grab button reference
const button = document.getElementById('myButton');
// create an observable of button clicks
const myObservable = fromEvent(button, 'click');
// for now, let's just log the event on each click
const subscription = myObservable.subscribe(event => console.log(event));

How’s that better than Promises?
Operators!
Operators are a way of modifying incoming values from a source observable, and returning a
destination observable of the transformed values. They can be used with the pipe function
which takes a an unlimited number of operators which will be performed in sequence as a chain.
import { of } from 'rxjs';
import { map } from 'rxjs/operators';
// 'of' allows you to deliver values in a sequence
const dataSource = of(1, 2, 3, 4, 5);
// subscribe to our source observable
const subscription = dataSource
.pipe(
map(value => value + 1), // add 1 to each emitted value
filter(value => value % 2 === 0) // only accept multiples of 2
)
.subscribe(value => console.log(value)); // log: 2, 4, 6

Example
import { debounceTime, mergeMap } from 'rxjs/operators
import { http, HttpRequest } from 'observable-http-lib';
// grab textarea reference
const myTextarea = document.getElementById('myTextarea');
// create an observable of textarea inputs
const eventSource = fromEvent(myTextarea, 'input');
// only send http request once user has stopped typing for 500ms
const subscription = eventSource
.pipe(
debounceTime(500),
mergeMap((event) =>
http.request(new HttpRequest('POST', '/my_endpoint', { data: event.data }))
)
)
.subscribe((res) => console.log(`success: ${res}`), (err) => console.log(`fail: ${err}`));

Questions?
Why no questions? :(

Shameless plug: spread the word about MyMahi (mymahi.co.nz), it’ll keep me employed, please. PLEASE. PLEASE!!!!
FIN

Promises, promises, and then observables

More Related Content

What's hot (20)

Similar to Promises, promises, and then observables (20)

Recently uploaded (20)

Promises, promises, and then observables

Editor's Notes