Promises And Chaining In AngularJS - Into Callback Hell And Back Again

Post on 30-Jun-2015

1.029 views 0 download

description

If you have worked with Javascript before you might have been there already - callback hell! But there is an easy & elegant way out to get back control over your code - Promises and promise chaining! This talk will give an introduction to promises and chaining in AngularJS. This talk was held by Hans-Gunther Schmidt at the Berlin AngularJS Meetup on Oct. 8th 2014 (http://www.meetup.com/AngularJS-Meetup-Berlin/events/182646022/).

Transcript of Promises And Chaining In AngularJS - Into Callback Hell And Back Again

Promises and chainingInto callback hell … back again

About Hans@otype

hans@otype.de

Intro: sync, async, callbacks

Humans are multi-threaded!

Browsers provide asynchrony*.

Javascript is single-threaded & synchronous.

finish

a()b()c()

start

a()b()c()

finish

a()b()c()

start

a()b()c()

b()a()c()

c()b()a()

c(),a()b() …

sync async

Why async?

Synchronous flow, here? Bad idea!

“Callbacks to the rescue!”

“Call me back!”

Use a callback! Way better!

Got it!

Callbacks in order?

a() b() c() d() e() f()

“Pyramid of doom!”

“I am NOT going to debug that!”

“Free ticket into callback hell!”

Core: Promises to the rescue

My definition of a promise

“I hereby give you a promise that I will answer your question some time in the future … but not right now!”

Promise

fulfilledrejected

settledpending

Still experimental

kriskowal/q cujojs/when

WinJS.Promisetildeio/rsvp.js

$q.defer()

.then()

.resolve() .reject()

.then() in .then() in .then() …

“I’ve seen that *$#%$* before …”

Chaining

“Wicked, Hans!”

“And what about collecting results from multiple promises?”

Combined results

$q.all()

“OK! Enough theory!”

Get fancy: Demo Time!

Outro: Questions?

http://ejohn.org/blog/how-javascript-timers-work/

http://www.html5rocks.com/en/tutorials/async/deferred/

https://docs.angularjs.org/api/ng/service/$q

https://github.com/kriskowal/q

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

https://www.promisejs.org/

https://github.com/promises-aplus/promises-spec

“Thank you! Over & out!”