├── 1_callback ├── 1.js ├── 2.js ├── 3.js └── 4.js ├── 2_promise ├── 5.js └── 6.js ├── 3_async_await ├── 7.js └── 8.js ├── 4_generator ├── 10.js ├── 11.js ├── 12.js ├── 13.js ├── 14.js └── 9.js ├── README.md └── package.json /1_callback/1.js: -------------------------------------------------------------------------------- 1 | const sum = function (a, b) { 2 | return a + b; 3 | }; 4 | 5 | console.log(sum(2, 2)); 6 | -------------------------------------------------------------------------------- /1_callback/2.js: -------------------------------------------------------------------------------- 1 | const delayedSum = function (a, b) { 2 | setTimeout(function () { 3 | return a + b; 4 | }, 500); 5 | }; 6 | 7 | console.log(delayedSum(2, 2)); 8 | -------------------------------------------------------------------------------- /1_callback/3.js: -------------------------------------------------------------------------------- 1 | const delayedSum = function (a, b, fn) { 2 | setTimeout(function () { 3 | fn(a + b); 4 | }, 500); 5 | }; 6 | 7 | delayedSum(2, 2, function (result) { 8 | console.log(result); 9 | }); 10 | -------------------------------------------------------------------------------- /1_callback/4.js: -------------------------------------------------------------------------------- 1 | const delayedSum = function (a, b, fn) { 2 | setTimeout(function () { 3 | fn(a + b); 4 | }, 500); 5 | }; 6 | 7 | console.time('performance'); 8 | delayedSum(2, 2, function (a) { 9 | delayedSum(4, 4, function (b) { 10 | delayedSum(a, b, function (result) { 11 | console.log(result); 12 | console.timeEnd('performance'); 13 | }); 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /2_promise/5.js: -------------------------------------------------------------------------------- 1 | const delayedSum = function (a, b) { 2 | return new Promise((resolve, reject) => { 3 | setTimeout(function () { 4 | resolve(a + b); 5 | }, 500); 6 | }); 7 | }; 8 | 9 | console.time('performance'); 10 | delayedSum(2, 2).then(function (a) { 11 | delayedSum(4, 4).then(function (b) { 12 | delayedSum(a, b).then(function (result) { 13 | console.log(result); 14 | console.timeEnd('performance'); 15 | }); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /2_promise/6.js: -------------------------------------------------------------------------------- 1 | const delayedSum = function (a, b) { 2 | return new Promise((resolve, reject) => { 3 | setTimeout(function () { 4 | resolve(a + b); 5 | }, 500); 6 | }); 7 | }; 8 | 9 | console.time('performance'); 10 | Promise.all([ 11 | delayedSum(2, 2), 12 | delayedSum(4, 4) 13 | ]).then(function (result) { 14 | const [a, b] = result; 15 | delayedSum(a, b).then(function (result) { 16 | console.log(result); 17 | console.timeEnd('performance'); 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /3_async_await/7.js: -------------------------------------------------------------------------------- 1 | const delayedSum = function (a, b) { 2 | return new Promise((resolve, reject) => { 3 | setTimeout(function () { 4 | resolve(a + b); 5 | }, 500); 6 | }); 7 | }; 8 | 9 | const execute = async function () { 10 | console.time('performance'); 11 | const a = await delayedSum(2, 2); 12 | const b = await delayedSum(4, 4); 13 | const result = await delayedSum(a, b) 14 | console.log(result); 15 | console.timeEnd('performance'); 16 | }; 17 | 18 | execute(); 19 | -------------------------------------------------------------------------------- /3_async_await/8.js: -------------------------------------------------------------------------------- 1 | const delayedSum = function (a, b) { 2 | return new Promise((resolve, reject) => { 3 | setTimeout(function () { 4 | resolve(a + b); 5 | }, 500); 6 | }); 7 | }; 8 | 9 | console.time('performance'); 10 | const [a, b] = await Promise.all([ 11 | delayedSum(2, 2), 12 | delayedSum(4, 4) 13 | ]); 14 | const result = await delayedSum(a, b); 15 | console.log(result); 16 | console.timeEnd('performance'); 17 | -------------------------------------------------------------------------------- /4_generator/10.js: -------------------------------------------------------------------------------- 1 | function* loop () { 2 | let i = 0; 3 | while(true) { 4 | console.log(i++); 5 | yield; 6 | } 7 | } 8 | 9 | const generator = loop(); 10 | generator.next(); 11 | generator.next(); 12 | generator.next(); 13 | generator.next(); 14 | generator.next(); 15 | generator.next(); 16 | console.log(new Date()); 17 | -------------------------------------------------------------------------------- /4_generator/11.js: -------------------------------------------------------------------------------- 1 | function* loop () { 2 | let i = 0; 3 | while(true) { 4 | yield i++; 5 | } 6 | } 7 | 8 | const generator = loop(); 9 | console.log(generator.next()); 10 | console.log(generator.next()); 11 | console.log(generator.next()); 12 | console.log(generator.next()); 13 | console.log(generator.next()); 14 | console.log(generator.next()); 15 | console.log(new Date()); 16 | -------------------------------------------------------------------------------- /4_generator/12.js: -------------------------------------------------------------------------------- 1 | const delayedSum = function (a, b) { 2 | return new Promise((resolve, reject) => { 3 | setTimeout(function () { 4 | resolve(a + b); 5 | }, 500); 6 | }); 7 | }; 8 | 9 | const execute = function* () { 10 | console.time('performance'); 11 | const a = yield delayedSum(2, 2); 12 | console.log(a); 13 | const b = yield delayedSum(4, 4); 14 | console.log(b); 15 | const result = yield delayedSum(a, b) 16 | console.log(result); 17 | console.timeEnd('performance'); 18 | }; 19 | 20 | const generator = execute(); 21 | generator.next().value.then(function (a) { 22 | generator.next(a).value.then(function (b) { 23 | generator.next(b).value.then(function (result) { 24 | console.log(generator.next(result)); 25 | }); 26 | }); 27 | }); 28 | -------------------------------------------------------------------------------- /4_generator/13.js: -------------------------------------------------------------------------------- 1 | const delayedSum = function (a, b) { 2 | return new Promise((resolve, reject) => { 3 | setTimeout(function () { 4 | resolve(a + b); 5 | }, 500); 6 | }); 7 | }; 8 | 9 | const async_ = function (fn) { 10 | const gen = fn(); 11 | asyncR_(gen); 12 | }; 13 | 14 | const asyncR_ = function (gen, result) { 15 | const obj = gen.next(result); 16 | if (obj.done) return; 17 | obj.value.then(function (result) { 18 | asyncR_(gen, result); 19 | }); 20 | }; 21 | 22 | async_(function* () { 23 | console.time('performance'); 24 | const a = yield delayedSum(2, 2); 25 | const b = yield delayedSum(4, 4); 26 | const result = yield delayedSum(a, b) 27 | console.log(result); 28 | console.timeEnd('performance'); 29 | }); 30 | -------------------------------------------------------------------------------- /4_generator/14.js: -------------------------------------------------------------------------------- 1 | const delayedSum = function (a, b) { 2 | return new Promise((resolve, reject) => { 3 | setTimeout(function () { 4 | resolve(a + b); 5 | }, 500); 6 | }); 7 | }; 8 | 9 | const async_ = async function (fn) { 10 | const generator = fn(); 11 | let obj = generator.next(); 12 | while (!obj.done) { 13 | const result = await obj.value; 14 | obj = generator.next(result); 15 | } 16 | }; 17 | 18 | async_(function* () { 19 | console.time('performance'); 20 | const a = yield delayedSum(2, 2); 21 | const b = yield delayedSum(4, 4); 22 | const result = yield delayedSum(a, b); 23 | console.log(result); 24 | console.timeEnd('performance'); 25 | }); 26 | -------------------------------------------------------------------------------- /4_generator/9.js: -------------------------------------------------------------------------------- 1 | function loop () { 2 | let i = 0; 3 | while(true) { 4 | console.log(i++); 5 | } 6 | } 7 | 8 | loop(); 9 | console.log(new Date()); 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Sincronizando o código JavaScript com callback, promise, generator e async/await 4 | 5 | Um dos principais desafios de quem utiliza a linguagem JavaScript, tanto no frontend quanto no backend, é lidar com o seu comportamento assíncrono. Para isso, é fundamental entender porque os callbacks existem e como podemos lidar com eles por meio de promises, evoluindo para a adoção de async/await. Vamos mostrar como o async/await funciona e para isso falaremos dos generators, implementando o async/await por meio deles. 6 | 7 | ## Expert 8 | 9 | | [](https://github.com/rodrigobranas) | 10 | | :-: | 11 | |[Rodrigo Branas](https://github.com/rodrigobranas)| -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "callback_promise_async_await_generator", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "type": "module", 10 | "author": "", 11 | "license": "ISC" 12 | } 13 | --------------------------------------------------------------------------------