JavaScript Promises

Globalcode – Open4education
JavaScript Promises
Derek Stavis
Engenheiro de Software

Who?
Derek Stavis
github.com/derekstavis
Software Engineer
Ruby, JavaScript, Python, C
Node, React & Webpack Advocate

How have you been doing
asynchronous JavaScript?

How have you been doing
continuation passing?

Using callback functions
// In the browser
setTimeout(function () {
// Will be called in the future
}, 2000);
// In the server
fs.readFile('file.txt', function () {
// Will be called when file.txt is read
});

Node.js callback standard
fs.readFile('file.txt', function (err, data) {
// If an error occurred, err will have a value
// Always check for errors using if clauses
})

Node.js callback scenario
Let’s say we have a fetch function
It does plain HTTP GET
Accepts a URL and a callback
Callback receives error and response
fetch ('url', function (err, res) { })

Node.js callback scenario
fetch('/users/session', function (sessionError, user) {
if (sessionError) {
alert('Error fetching session')
return
}
fetch('/users/' + user.id + '/posts', function
(userErr, posts) {
if (userErr) {
alert('Error fetching user posts')
return
}
renderUserPosts(posts)
})
})

Node.js callback hell

How could we flatten that tree?

new Promise()

Formal definition
"A promise represents the eventual
result of an asynchronous
operation."

Enter Promises
An object which represents and
manage the lifecycle of a future
result

Promise states
Pending
Fulfilled Rejected

Promise states
Promises aren't reusable

Promise API
// New Promises start in "Pending" state
new Promise(function (resolve, reject) {
// Transition to "Rejected" state
reject(new Error('A meaningful error'))
// Transition to "Fulfilled" state
resolve({ my: 'data' })
})

Promise API
var promise = new Promise(...)
promise.then(function (result) {
console.log(result)
})
=> { my: "data" }

Promise API
var promise = new Promise(...)
promise.catch(function (error) {
console.log(error.message)
})
=> A meaningful error

Promise API
Node.js callbacks can be easily
wrapped in promises

Promise API
function fetch (url) {
return new Promise(function (resolve, reject) {
request(url, function (err, data) {
if (err) {
reject(err)
} else {
resolve(data)
}
})
}

Promise API
Every .then and .catch return a
new promise, so promises are
chainable

Flattening the tree
function fetchPosts (user) {
return fetch('/users/' + user.id + '/posts')
}
function fetchSession () {
return fetch('/users/session')
}
fetchSession()
.catch(handleSessionError)
.then(fetchPosts)
.catch(handlePostsError)
.then(renderUserPosts)

Flattening the tree
Chaining allows flattening the
callback hell and make continuation
passing look sequential

Flattening the tree
const fetchTuples = () =>
Promise.resolve([
[1, 1],
[2, 2],
[6, 4]
])

Chaining (a.k.a. sequence monad)
const makeObject = e => ({ l: e[0], r: e[1] })
const attachPlus = e => merge(e, { plus: e.l + e.r })
const attachMinus = e => merge(e, { minus: e.l - e.r })
const attachTimes = e => merge(e, { times: e.l * e.r })
const attachDivide = e => merge(e, { divide: e.l / e.r })
fetchTuples()
.then(map(makeObject))
.then(map(attachPlus))
.then(map(attachMinus))
.then(map(attachTimes))
.then(map(attachDivide))
.then(console.log.bind(console))

Chaining (a.k.a. sequence monad)
{ l: 1, r: 1, plus: 2, minus: 0, times: 1, divide: 1 }
{ l: 2, r: 2, plus: 4, minus: 0, times: 4, divide: 1 }
{ l: 6, r: 4, plus: 10, minus: 2, times: 24, divide: 1.5 }

Promise Implementation
Promise is a specification

There are a handful of Promise
implementations

Solving different issues, focusing
on different areas

So I have to be tied to a single
implementation?

NOT HERE

Promises/A+ Contract
https://promisesaplus.com

Promises/A+ provides interface and
behaviour specification for
interoperable promises

So you are free to use the
implementation which better fit
your needs while keeping your code
compatible

This contract was created because
there was no native Promise
specification in ECMAScript

ECMAScript 2015 Promise
Since ECMAScript 2015 the Promise
object was included in the spec
https://tc39.github.io/ecma262/#sec-promise-
constructor

It allows more fun stuff do be done

Waiting for multiple Promises

Waiting for multiple Promises
var promises = [
setTimeout(resolve, 1000);
}),
})
]
Promise.all(promises).then(function () {
console.log('Ran after 2 seconds')
})

Racing multiple Promises

Racing multiple Promises
var promises = [
}),
})
]
Promise.race(promises).then(function () {
console.log('Ran after 1 second')
})

You should definitely look into
Promises

Because there's even more!

Bluebird
A complete Promise library
http://bluebirdjs.com

Bluebird Promise
Catch rejections like exceptions

Fine-grained exceptions
function SessionError(message) {
this.message = message
this.name = "SessionError"
Error.captureStackTrace(this, SessionError)
}
SessionError.prototype =
Object.create(Error.prototype)
SessionError.prototype.constructor = SessionError

Fine-grained exceptions
function fetchPosts (user) {
throw new PostsError('could not fetch posts')
}
function fetchSession () {
return new SessionError('could not fetch session')
}
fetchSession()
.then(fetchPosts)
.then(renderPosts)
.catch(SessionError, handleSessionError)
.catch(PostsError, handlePostsError)

Bluebird Promise
Spread Promise.all result as
parameters

Parameter spread
Promise.all([
download('http://foo.bar/file.tar.gz'),
download('http://foo.bar/file.tar.gz.sig')
]).spread((file, signature) =>
sign(file) == signature
? Promise.resolve(file)
: Promise.reject('invalid signature')
)

Bluebird Promise
Use .all & .spread for dynamic
amount of promises
When doing fixed number of
promises use .join

Join promises results
Promise.join(
download('http://foo.bar/file.tar.gz'),
download('http://foo.bar/file.tar.gz.sig'),
(file, signature) =>
sign(file) == signature
)

Bluebird Promise
Resolve objects with promises

Join promises results
Promise.props({
file: download('http://foo.bar/file.tar.gz'),
sig: download('http://foo.bar/file.tar.gz.sig')
}).then(data =>
sign(data.file) == data.sig
)

Bluebird Promise
Do some .reduce with promises

Reduce promises results
const urls = fetchProjects()
Promise.reduce(urls, (total, url) =>
fetch(url).then(data =>
total + data.stars), 0)

HTML Fetch
A Promise approach to HTTP requests
https://fetch.spec.whatwg.org

#DeprecateXHR
fetch('/users.json')
.then(function(response) {
return response.json()
}).then(function(json) {
console.log('parsed json', json)
}).catch(function(ex) {
console.log('parsing failed', ex)
})

#DeprecateXHR
}).then(function(json) {
console.log('parsed json', json)
}).catch(function(ex) {
console.log('parsing failed', ex)
})

#DeprecateXHR
fetch is growing so powerful

#DeprecateXHR
$ telnet mockbin.org 80
GET /bin/2294df68-ae10-4336-a732-3170597543a9 HTTP/1.1
Accept: */*
Host: mockbin.org
HTTP/1.1 200 OK
Content-Type: text/html
Custom-Header: CustomValue
{"fetch": "is so cool"}

#DeprecateXHR
fetch promise resolve as soon as
headers are ready

Demo
Fetching stuff from Github
https://github.com/derekstavis/
promises-on-the-browser

Thanks for watching
Questions?
github.com/derekstavis
twitter.com/derekstavis
facebook.com/derekstavis

JavaScript Promises

More Related Content

What's hot

Viewers also liked

Similar to JavaScript Promises

More from Derek Willian Stavis

Recently uploaded

In this document

JavaScript Promises