ES Promise.

Size: px

Start display at page:

Download "ES Promise."

Allen Phelps
5 years ago
Views:

1 ES Promise

2 A Promise represents a value which may be available now, or in the future, or never. Promise A Promise is a proxy for a value not necessarily known when the promise is created. It allows you to associate handlers to an asynchronous action's eventual success value or failure reason.

3 ECMA Script Promise

5 var promise = new Promise(function(resolve, reject) { // call resolve or reject }); promise.then(function(value) { // work with value }, function(error) { // on error }); Basic usage (I)

6 function get(url) { return new Promise(function(resolve, reject) { var req = new XMLHttpRequest(); req.open('get', url); req.onload = function() { if (req.status == 200) { resolve(req.response); } else { reject(error(req.statustext)); } }; req.onerror = function() { reject(error("network Error")); }; req.send(); }); } Basic usage (II)

7 function get(url) { return new Promise(function(resolve, reject) { var req = new XMLHttpRequest(); req.open('get', url); req.onload = function() { if (req.status == 200) { resolve(req.response); } else { reject(error(req.statustext)); } }; req.onerror = function() { reject(error("network Error")); }; req.send(); }); } Basic usage (III)

9 [ { "id": , "name": "ember-sokoban",... }, { "id": , "name": "tajpado",... },... ]

10 get(' { var repos = JSON.parse(response); console.log(repos.map(repo => repo.name)); }); Basic usage (IV)

12 Y si hay un error en la petición?

13 function get(url) { return new Promise(function(resolve, reject) { var req = new XMLHttpRequest(); req.open('get', url); req.onload = function() { if (req.status == 200) { resolve(req.response); } else { reject(error(req.statustext)); } }; req.onerror = function() { reject(error("network Error")); }; req.send(); }); }

14 get(' { var repos = JSON.parse(response); console.log(repos.map(repo => repo.name)); }, function(error) { console.warn(error); }); Error handling (I)

15 get(' { var repos = JSON.parse(response); console.log(repos.map(repo => repo.name)); }).catch(function(error) { console.warn(error); }); Error handling (II)

16 .catch(function(reason) {}) =.then(undefined, function(reason) {}) Error handling (III)

17 get(' { return JSON.parse(response); }).then(function(repos) { return repos.map(repo => repo.name); }).then(function(names) { console.log(names); }); Transforming values (I)

18 get(' { return repos.map(repo => repo.name); }).then(console.log); Transforming values (II)

19 get(' { return get(repo.stargazers_url); }).then(json.parse).then(function(stars) { console.log(stars.length); }); Queuing async actions (I)

20 get(' { return get(repo.stargazers_url); }).then(json.parse).then(function(stars) { console.log(stars.length); }); Queuing async actions (II)

21 get(' { //... then 1 }).catch(function(error) { //... catch 1 }).then(function(message) { //... then 2 }); Ejercicio para el lector

22 get('...') Then 1 Catch 1 Then 2 Done Unhandled error

23 Promise.all([ get(' get(' ]).then(function(responses) { // array of responses }); Promise.all(iterable)

24 Promise.race([ get(' get(' ]).then(function(response) { // only one response }); Promise.race(iterable)

25 Promise.resolve('a dummy value'); Promise.resolve(value)

26 Promise.reject(Error('a failed promise')); Promise.reject(reason)

27 ECMAScript Promise new Promise(function(resolve, reject)) then, catch chaining Promise.all Promise.race Promise.resolve Promise.reject

28 RSVP.Promise

31 function get(url) { return new RSVP.Promise(function(resolve, reject) { var req = new XMLHttpRequest(); req.open('get', url); req.onload = function() { if (req.status == 200) { resolve(req.response); } else { reject(error(req.statustext)); } }; req.onerror = function() { reject(error("network Error")); }; req.send(); }); } Basic usage (I)

32 function get(url) { return new RSVP.Promise(function(resolve, reject) { var req = new XMLHttpRequest(); req.open('get', url); req.onload = function() { if (req.status == 200) { resolve(req.response); } else { reject(error(req.statustext)); } }; req.onerror = function() { reject(error("network Error")); }; req.send(); }); } Basic usage (II)

33 var deferred = RSVP.defer(); //... deferred.promise // access the promise //... deferred.resolve(); Deferred (I)

34 var deferred = RSVP.defer(); btn.onclick = function() { deferred.resolve(42); }; deferred.promise.then(function(value) { console.log(`the answer to life the universe and everything is ${value}`); }); Deferred (II)

35 get(' { // process }).catch(function(error) { // an error }).finally(function() { // always runs }); finally

36 RSVP.hash({ ceibo: get(' ombu: get(' }).then(function(data) { // data.ceibo // data.ombu }); RSVP.hash

37 RSVP.hashSettled({ ceibo: get(' ombu: get(' }).then(function(data) { // data.ceibo -> { state: 'fulfilled', value: value } // data.ombu -> { state: 'rejected', reason: reason } }); RSVP.hashSettled

38 RSVP.allSettled([ get(' get(' ]).then(function(responses) { // responses[0] -> { state: 'fulfilled', value: value } // responses[1] -> { state: 'rejected', reason: reason } }); RSVP.allSettled

39 RSVP.on('created', function(event) { // event.detail // event.label //... }); RSVP.on('fulfilled', function(event) { //... }); RSVP.on('rejected', function(event) { //... }); Instrumentation

40 new RSVP.Promise(function(resolve, reject) {}, "a label"); RSVP.Promise.resolve('a value', 'a label'); RSVP.on('created', function(event) { // event.label }); Labelling

41 RSVP.on('error', function(reason, label) { if (label) { console.error(label); } console.assert(false, reason); }); Unhandled errors

42 RSVP.Promise Deferred finally RSVP.hash RSVP.allSettled RSVP.hashSettled RSVP.on(...) instrumentation RSVP.on('error') unhandled errors labelling

43 Bluebird

46 get(' function() { // could not get response within 100ms }).catch(function() { // different error }); timeout

47 get(' function() { // could not get response within 100ms }).catch(function() { // different error }); Catch with "type matching"

48 function get(url) { return new Promise(function(resolve, reject, oncancel) { var xhr = new XMLHttpRequest();... oncancel(function() { xhr.abort(); }); }); } Cancellation

49 Y mil cosas más...

50 Problemas, futures y observables

51 Problemas...

52 var promise = get(' btn.onclick = function() { promise.cancel(); // nope :-( }; Cancellation

53 var promise = new Promise(function(resolve, reject) { //... }).then(function() { //... }).then(function() { //... }).then(function() { //... }).then(function() { //... }); Performance

54 get(' { return JSON.parse(response); }).then(function(repos) { return repos.map(repo => repo.name); }).then(function(names) { console.log(names); }); Inconsistencias, no es lo mismo retornar un valor que retornar una promesa

55 Problemas No se pueden cancelar No son lazy, la función executor se ejecuta siempre Performance Inconsistencias, no es lo mismo retornar un valor que retornar una promesa

56 Futures

57 Futures (Fluture) Much like Promises, Futures represent the value arising from the success or failure of an asynchronous operation (I/O). Though unlike Promises Futures are lazy and monadic by design. They conform to the Fantasy Land algebraic JavaScript specification.

60 new Promise((res) => settimeout(200, res, 'Hello')).then(x => `${x} world!`).then(x => get('/foo')).then(console.log, console.error); // -----Future((rej, res) => settimeout(200, res, 'Hello')).map(x => `${x} world!`).chain(x => get('/foo')).fork(console.error, console.log);

61 Observable

62 Observable (RxJS) Is a set of libraries to compose asynchronous and event-based programs using observable collections and Array#extras style composition in JavaScript. Some differences with promises 0 or many values Sync or async Lazy Can be cancelled

63 // Get stock data somehow const source = getasyncstockdata(); const subscription = source.filter(quote => quote.price > 30).map(quote => quote.price).foreach(price => console.log(`prices higher than $30: ${price}`);

Asynchronous Programming in Javascript, Part 2. CSCI 5828: Foundations of Software Engineering Lecture 19 10/25/2016

Asynchronous Programming in Javascript, Part 2 CSCI 5828: Foundations of Software Engineering Lecture 19 10/25/2016 1 Goals Discussed asynchronous programming in Javascript in Lecture 18 The gap between