Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

All you need to know about Callbacks, Promises, Generators

717 views

Published on

As presented at DevDuck #1 - JavaScript meetup for developers (www.devduck.pl)

Prezentacja z #1 spotkania DevDuck'a w Gliwicach (www.devduck.pl), spotkania mającego na celu poszerzanie wiedzy i wymianę doświadczeń z zakresu szeroko pojętego JS'a, a w szczególności Node.js/React.js i im pochodnych kończących się na ".js" :).

Wykorzystane narzędzia:
- https://github.com/FormidableLabs/spectacle
- https://github.com/ajaxorg/ace
----
Spotkanie odbyło się w Gliwicach w siedzibie Brainhub (www.brainhub.eu)

Published in: Software
  • Login to see the comments

All you need to know about Callbacks, Promises, Generators

  1. 1. CALLBACKS, PROMISES, GENERATORS
  2. 2. Adam Gołąb Full Stack Developer at
  3. 3. In computer programming, a callback is a piece of executable code that is passed as an argument to other code, which is expected to call back (execute) the argument at some convenient time. Callbacks
  4. 4. Good Practice Run ► function validate(email, cb) { if (email.match(/^[a-zA-Z0-9]+@[a-zA-Z0-9]+(.[a-zA-Z0-9]+)+$/)) { return cb(null, email); } return cb(new Error('incorrect email address')); } validate('email@example.com', (err, email) => { if (err) { return console.log(err); } console.log('Successfully validated:', email); }); Successfully validated: email@example.com 1 2 3 4 5 6 7 8 9 10 11 12 13
  5. 5. For a function to be asynchronous it needs to perform an asynchronous operation. It needs to incorporate the argument callback in handling the results of this asynchronous operation. Only this way the function becomes asynchronous. Asynchronous
  6. 6. Async Callback Run ► function callAsync(fn) { setTimeout(fn, 0); } callAsync(() => console.log('callback function')); console.log('after'); after callback function 1 2 3 4 5 6
  7. 7. AJAX request Run ► const request = require('request'); request('http://localhost:3000/api', (err, res, body) => console.log(body)); Response from server 1 2 3
  8. 8. IO operation Run ► const fs = require('fs'); fs.readFile('./file.txt', 'utf-8', (err, data) => { if(!err) { console.log(data); } }); Hello from file 1 2 3 4 5 6 7
  9. 9. Pyramid from hell Run ► const request = require('request'); const fs = require('fs'); request('http://localhost:3000/api', (err, res, body) => { if (!err) { fs.readFile('./file.txt', 'utf-8', (err, data) => { if (!err) { [data, body].map((text, index) => { console.log(index, text); }); } }); } }); 0 'Hello from filen' 1 'Response from server' 1 2 3 4 5 6 7 8 9 10 11 12 13 14
  10. 10. PromisesThe Promise object is used for asynchronous computations. A Promise represents a value which may be available now, or in the future, or never. new Promise( function(resolve, reject) { ... } );
  11. 11. Promises Run ► const a = 4; const b = 2; const p = new Promise((resolve, reject) => { if (b === 0) { reject(new Error('Do not divide by zero')); } resolve(a / b); }); p.then(value => console.log(value)).catch(err => console.error(err)); 2 1 2 3 4 5 6 7 8 9 10
  12. 12. AJAX Fetch Run ► const fetch = require('node-fetch'); // there is no window.fetch on node.js fetch('http://localhost:3000/api') .then(res => res.text()) .then(body => console.log(body)); Response from server 1 2 3 4 5
  13. 13. Run ► No more callback hellconst fetch = require('node-fetch'); const fs = require('fs'); function readFilePromised(file) { const p = new Promise((resolve, reject) => { fs.readFile(file, 'utf-8', (err, data) => { if (err) { reject(err); } resolve(data); }); }); return p; } Promise.all([ readFilePromised('./file.txt'), fetch('http://localhost:3000/api').then(r => r.text()) ]) .then((responses) => responses.map((text, index) => { console.log(index, text); })); 0 'Hello from filen' 1 'Response from server' 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
  14. 14. Generators is a special routine that can be used to control the iteration behaviour of a loop. In fact, all generators are iterators Pausable functions
  15. 15. Run ► Natural numbers generator function *naturalNumbers() { let x = 0; while (true) { x = x + 1; yield x; } } const generator = naturalNumbers(); console.log(generator.next()); console.log(generator.next()); console.log(generator.next()); { value: 1, done: false } { value: 2, done: false } { value: 3, done: false } 1 2 3 4 5 6 7 8 9 10 11 12
  16. 16. Async generator Run ► const fetch = require('node-fetch'); const co = require('co'); co(function *() { const uri = 'http://localhost:3000/api'; const response = yield fetch(uri); const body = yield response.text(); console.log(body); }); Response from server 1 2 3 4 5 6 7 8 9
  17. 17. Run ► Co function implementation const fetch = require('node-fetch'); function co(generator) { const iterator = generator(); const iteration = iterator.next(); function iterate(iteration) { if (iteration.done) { return iteration.value; } const promise = iteration.value; return promise.then(x => iterate(iterator.next(x))); } return iterate(iteration); } co(function *() { const uri = 'http://localhost:3000/api'; const response = yield fetch(uri); const body = yield response.text(); console.log(body); }); Response from server 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
  18. 18. Questions?

×