Async/Await JavaScript - Entwicklertag...TypeScript JohannesDienst [email protected]...

22
Async/Await JavaScript Johannes Dienst

Transcript of Async/Await JavaScript - Entwicklertag...TypeScript JohannesDienst [email protected]...

Page 1: Async/Await JavaScript - Entwicklertag...TypeScript JohannesDienst jdienst@multamedio.de JohannesDienst.net Created Date 6/14/2016 7:05:09 PM ...

Async/AwaitJavaScript

Johannes Dienst

Page 2: Async/Await JavaScript - Entwicklertag...TypeScript JohannesDienst jdienst@multamedio.de JohannesDienst.net Created Date 6/14/2016 7:05:09 PM ...
Page 3: Async/Await JavaScript - Entwicklertag...TypeScript JohannesDienst jdienst@multamedio.de JohannesDienst.net Created Date 6/14/2016 7:05:09 PM ...

doAsync1

λ

callback

doAsync2

λ

callback

doAsync3

λ

callback

Input

Output

Page 4: Async/Await JavaScript - Entwicklertag...TypeScript JohannesDienst jdienst@multamedio.de JohannesDienst.net Created Date 6/14/2016 7:05:09 PM ...

3

Page 5: Async/Await JavaScript - Entwicklertag...TypeScript JohannesDienst jdienst@multamedio.de JohannesDienst.net Created Date 6/14/2016 7:05:09 PM ...
Page 6: Async/Await JavaScript - Entwicklertag...TypeScript JohannesDienst jdienst@multamedio.de JohannesDienst.net Created Date 6/14/2016 7:05:09 PM ...

Hasta la vista Callback Hell

Page 7: Async/Await JavaScript - Entwicklertag...TypeScript JohannesDienst jdienst@multamedio.de JohannesDienst.net Created Date 6/14/2016 7:05:09 PM ...

getFoo()

.then((foo) => {

return formatBar(foo);

})

.then((foo) => {

return sendFooToMe(foo);

});

Page 8: Async/Await JavaScript - Entwicklertag...TypeScript JohannesDienst jdienst@multamedio.de JohannesDienst.net Created Date 6/14/2016 7:05:09 PM ...

7Promise Hell

Page 9: Async/Await JavaScript - Entwicklertag...TypeScript JohannesDienst jdienst@multamedio.de JohannesDienst.net Created Date 6/14/2016 7:05:09 PM ...

Promises/A+

Page 10: Async/Await JavaScript - Entwicklertag...TypeScript JohannesDienst jdienst@multamedio.de JohannesDienst.net Created Date 6/14/2016 7:05:09 PM ...

getDatabase()

.then((db) => {

return findAllFoo(db)

.then((foos) => {

return getBar(db)

.then((bar) => {

return pickFoobar(foos, bar);

});

});

});

Page 11: Async/Await JavaScript - Entwicklertag...TypeScript JohannesDienst jdienst@multamedio.de JohannesDienst.net Created Date 6/14/2016 7:05:09 PM ...

function* dumbGenerator() { yield 1; yield 2; yield 3;}

let gen = dumbGenerator();gen.next()

Page 12: Async/Await JavaScript - Entwicklertag...TypeScript JohannesDienst jdienst@multamedio.de JohannesDienst.net Created Date 6/14/2016 7:05:09 PM ...

runGenerator( function* main() { yield getPromise(); yield getPromise(); }

);

Page 13: Async/Await JavaScript - Entwicklertag...TypeScript JohannesDienst jdienst@multamedio.de JohannesDienst.net Created Date 6/14/2016 7:05:09 PM ...
Page 14: Async/Await JavaScript - Entwicklertag...TypeScript JohannesDienst jdienst@multamedio.de JohannesDienst.net Created Date 6/14/2016 7:05:09 PM ...

async function afunc() { let res = await getPromise(); console.log(res);}

Page 15: Async/Await JavaScript - Entwicklertag...TypeScript JohannesDienst jdienst@multamedio.de JohannesDienst.net Created Date 6/14/2016 7:05:09 PM ...

await

async

Page 16: Async/Await JavaScript - Entwicklertag...TypeScript JohannesDienst jdienst@multamedio.de JohannesDienst.net Created Date 6/14/2016 7:05:09 PM ...

async function afunc() { let res = await getPromise(); console.log(res);}

// Returns promiselet res = afunc();

Page 17: Async/Await JavaScript - Entwicklertag...TypeScript JohannesDienst jdienst@multamedio.de JohannesDienst.net Created Date 6/14/2016 7:05:09 PM ...

async function afunc() {

await Promise.all( [getPromise1(), getPromise1()] );

}

Page 18: Async/Await JavaScript - Entwicklertag...TypeScript JohannesDienst jdienst@multamedio.de JohannesDienst.net Created Date 6/14/2016 7:05:09 PM ...

async function afunc() { try { let res = await getPromise(); console.log(res); } catch(error) { console.log('ERROR') }}

Page 19: Async/Await JavaScript - Entwicklertag...TypeScript JohannesDienst jdienst@multamedio.de JohannesDienst.net Created Date 6/14/2016 7:05:09 PM ...

Asynchroner Code

in

synchronen Schläuchen

Page 20: Async/Await JavaScript - Entwicklertag...TypeScript JohannesDienst jdienst@multamedio.de JohannesDienst.net Created Date 6/14/2016 7:05:09 PM ...

Callbacks

Promises Generatoren

Async/Await

Page 21: Async/Await JavaScript - Entwicklertag...TypeScript JohannesDienst jdienst@multamedio.de JohannesDienst.net Created Date 6/14/2016 7:05:09 PM ...

ES2017

TypeScript

Page 22: Async/Await JavaScript - Entwicklertag...TypeScript JohannesDienst jdienst@multamedio.de JohannesDienst.net Created Date 6/14/2016 7:05:09 PM ...

JohannesDienst

[email protected]

JohannesDienst.net