Practical Promises As opposed to impractical promises 1 what is - - PowerPoint PPT Presentation

▶
practical promises
SMART_READER_LITE
LIVE PREVIEW

Practical Promises As opposed to impractical promises 1 what is - - PowerPoint PPT Presentation

Apr 06, 2023 7 likes •283 views

Practical Promises As opposed to impractical promises 1 what is asynchronous code? Asynchronous (aka async ) just means: takes some time or happens in the future, not right now and JavaScript won't wait for it. 3 what is

slide-1
SLIDE 1

Practical Promises

1

As opposed to impractical promises

slide-2
SLIDE 2

what is asynchronous code?

3

Asynchronous (aka async) just means: “takes some time” or “happens in the future, not right now”… …and JavaScript won't wait for it.

slide-3
SLIDE 3

what is asynchronous code?

4

console.log("One") setTimeout(() => console.log("Two"), 10) console.log("Three") ๏ In which order will the logs fire?

slide-4
SLIDE 4

what is a asynchronous code?

5

console.log("One") setTimeout(() => console.log("Two"), 10) console.log("Three") ๏ In which order will the logs fire? One Three Two

slide-5
SLIDE 5

what is asynchronous code?

6

Event Loop

File System Database Network

Your Code

slide-6
SLIDE 6

How do we handle asynchronous code?

7

  • 1. Callbacks
slide-7
SLIDE 7

what is a callback?

8

slide-8
SLIDE 8

what is a callback?

9

Technically: a function passed to another function

  • Blocking
  • Non-blocking

two flavors…

slide-9
SLIDE 9

Async with Callbacks

10

๏ BTW, In which order will the logs fire?

console.log("Getting Configuration") fs.readFile('/config.json', 'utf8', (err, data) => { console.log("Got configuration:", data) }); console.log("Moving on…");

slide-10
SLIDE 10

Problems with Callbacks

11

const tryGetRich = () => { readFile('/luckyNumbers.txt', (err, fileContent) => { // Do something with lucky numbers }) }

slide-11
SLIDE 11

Problems with Callbacks

12

const tryGetRich = () => { readFile('/luckyNumbers.txt', (err, fileContent) => { nums = fileContent.split(","); nums.forEach(num => { bookmaker.getHorse(num, (err, horse) => { // Ok, this is getting a little confusing }) }) }) }

slide-12
SLIDE 12

Problems with Callbacks

13

const tryGetRich = () => { readFile('/luckyNumbers.txt', (err, fileContent) => { nums = fileContent.split(","); nums.forEach(num => { bookmaker.getHorse(num, (err, horse) => { bookmaker.bet(horse, (err, success) => { if(success) { // Help... } }) }) console.log('When will I run??') }) }) }

slide-13
SLIDE 13

like this?

14

var result; setTimeout(function cb () { result = 'hello'; }, 0); console.log(result);

slide-14
SLIDE 14

like this?

15

var result = setTimeout(function cb () { return 'hello'; }, 0); console.log(result);

slide-15
SLIDE 15

like this?

16

setTimeout(function cb () { var result = 'hello'; console.log(result); }, 0);

slide-16
SLIDE 16

How do we handle asynchronous code?

17

  • 1. Callbacks
  • 2. Promises
slide-17
SLIDE 17

promise

18

— The Promises/A+ Spec

“A promise represents the eventual result


  • f an asynchronous operation.”
slide-18
SLIDE 18

Callback v promise

19

vanilla async callback


fs.readFile(‘file.txt’, function callback (err, data) {…} );

async promise


fs.readFileAsync(‘file.txt’)
 .then( function onSuccess (data) {…}, function onError (err) {…} );

slide-19
SLIDE 19

promise

20

{ [[PromiseValue]]: undefined, [[PromiseStatus]]: "pending" }

readFileAsync(‘/luckyNumber.txt’)

slide-20
SLIDE 20

promise

21

readFileAsync(‘/luckyNumber.txt’)

{ [[PromiseValue]]: "42", [[PromiseStatus]]: "fulfilled" }

slide-21
SLIDE 21

var result; promisifiedSetTimeout(0) .then(function success () { result = 'hello'; }); console.log(result);

like this?

22

slide-22
SLIDE 22

var result = promisifiedSetTimeout(0) .then(function success () { return 'hello'; }); console.log(result);

like this?

23

slide-23
SLIDE 23

like this?

24

promisifiedSetTimeout(0) .then(function success () { var result = 'hello'; console.log(result); });

slide-24
SLIDE 24

synchronous

25

var path = ‘demo-poem.txt'; console.log('- I am first -'); try { var buff = fs.readFileSync(path); console.log(buff.toString()); } catch (err) { console.error(err); } console.log('- I am last -'); var path = 'demo-poem.txt'; fs.readFile(path, function (err, buff) { if (err) console.error(err); else console.log(buff.toString()); console.log('- I am last -'); }); console.log('- I am first -'); var path = 'demo-poem.txt'; promisifiedReadFile(path) .then(function (buff) { console.log(buff.toString()); }, function (err) { console.error(err); }) .then(function () { console.log('- I am last -'); }); console.log('- I am first -');

async (callbacks) async reading a file

slide-25
SLIDE 25

26

fine

var path = ‘demo-poem.txt'; promisifiedReadFile(path) .then(function (buff) { console.log(buff.toString()); }) .catch(function (err) { console.error(err); });

better best* error handling

26

var path = ‘demo-poem.txt'; promisifiedReadFile(path) .then(function (buff) { console.log(buff.toString()); }) .then(null, function (err) { console.error(err); }); var path = 'demo-poem.txt'; promisifiedReadFile(path) .then(function (buff) { console.log(buff.toString()); }, function (err) { console.error(err); });

slide-26
SLIDE 26

error handling continued

27

var path = ‘demo-poem.txt’; var path = ‘demo-poem-2.txt’; promisifiedReadFile(path) .then(function (buff) { console.log(buff.toString()); return promisifiedReadFile(path2); }) .then(function (buff) { console.log(buff.toString()); }) .catch(function (err) { console.error(err); });

slide-27
SLIDE 27

28

promise advantages

  • Portable
  • Multiple handlers
  • “Linear”
  • Unified error handling