Programação Assíncrona com JavaScript

Transcript

1. PROGRAMAÇÃO ASSÍNCRONA COM JAVASCRIPT @di3goleite
2. DIEGO LEITE AdMobilize UEFS @di3goleite
3. @di3goleite
4. @di3goleite
5. Roadmap • Event Loop • Callbacks • Promises (ES6) • Async functions (ES7) @di3goleite
6. Resumo sobre Event Loop • JavaScript runtime é single thread One thread === Single call stack === One thing at a time @di3goleite
7. Introducing the problem Before After @di3goleite
8. Callbacks In JavaScript - Functions are 1st class objects - Functions can be stored in variables, passed as arguments to functions, created within functions and returned from functions. Because functions are first class objects, we can pass a function as an argument in another function and later execute that passed-in function. $('#btn_1').click(function () { alert('HUEHUE BRBR'); }); var showAlert = function () { alert('HUEHUE BRBR'); }; $('#btn_1').click(showAlert); @di3goleite
9. Callback hell getMoreData(a, function(b) { getMoreData(b, function(c) { getMoreData(c, function(d) { getMoreData(d, function(e) { console.log('Callback Hell'); }); }); }); }); Callbacks === Continuations @di3goleite
10. Callback hell @di3goleite
11. Callback hell - how to solve? setTimeout(function () { console.log('one'); setTimeout(function () { console.log('two'); setTimeout(function () { console.log('three'); }, 1000); }, 1000); }, 1000); function one(callback) { console.log('one'); setTimeout(callback, 1000); } function two(callback) { console.log('two'); setTimeout(callback, 1000); } function three(callback) { console.log('three'); setTimeout(callback, 1000); } one(function() { two(three); }); @di3goleite
12. Promises to the rescue (ES6) @di3goleite
13. What are promises? A reference for a value that will eventually become available @di3goleite
14. Promises - top to bottom // There can be one or more then() method calls that // don't provide an error handler. Then the error is // passed on until there is an error handler asyncFunction1() .then(asyncFunction2) .then(asyncFunction3) .catch(function (error) { // Something went wrong above }); Promises can be chained. This is one of the fundamental point to understand it. @di3goleite
15. Promises - how that works inside? let promise = new Promise(function(resolve, reject) { resolve("done"); reject(new Error("…")); // ignored setTimeout(() => resolve("…")); // ignored }); @di3goleite
16. Async functions (ES7) @di3goleite
17. Async functions - how to use that? function doAsyncOperation() { return asyncOperation().then(function(val)) { console.log(val); return val; }); } async function doAsyncOperation() { var val = await asyncOperation(); console.log(val); return val; } @di3goleite
18. Async functions - chaining function doAsyncOperation() { return asyncOperation().then(function(val) { return asyncOperation(val); }).then(function(val) { return asyncOperation(val); }).then(function(val) { return asyncOperation(val); }); } async function doAsyncOperation() { var val = await asyncOperation(); val = await asyncOperation(val); val = await asyncOperation(val); return await asyncOperation(val); } @di3goleite
19. Async functions - handling errors function doAsyncOperation() { return asyncOperation().then(function(val) { return asyncOperation(val); }).then(function(val) { return asyncOperation(val); }).catch(function(error) { console.error(error); }); } async function doAsyncOperation() { try { var val = await asyncOperation(); val = await asyncOperation(val); return await asyncOperation(val); } catch (error) { console.error(error); } } @di3goleite
20. Callbacks, Promises and Async Functions @di3goleite
21. Questions? Twitter e GitHub @di3goleite @di3goleite
22. Obrigado! @di3goleite