Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Promises, Promises

Promises, Promises

Presentation from Meet.js Warsaw + Adobe https://www.facebook.com/events/272800652850131/
(or http://www.adobe.com/pl/event/create-now-world-tour.html)

Basic concepts about Promises (mostly with Q.js)

krzychukula

March 01, 2013
Tweet

More Decks by krzychukula

Other Decks in Programming

Transcript

  1. Beware • Code examples inspired by: Q.js • Mixing polish

    and english • May be complately wrong • 20min is not enough!
  2. function onInitFs(fs) { fs.root.getFile('foo.txt', {}, function(fileEntry) { fileEntry.file(function(file) { var

    reader = new FileReader(); reader.onloadend = function(e) { var txtArea = document.createElement('textarea'); txtArea.value = this.result; document.body.appendChild(txtArea); }; reader.readAsText(file); }, errorHandler); }, errorHandler); }
  3. function onInitFs(fs) { fs.root.getFile('foo.txt', {}, function(fileEntry) { fileEntry.file(function(file) { var

    reader = new FileReader(); reader.onloadend = function(e) { function onInitFs(fs) { fs.root.getFile('foo.txt', {}, function(fileEntry) { fileEntry.file(function(file) { var reader = new FileReader(); reader.onloadend = function(e) { var txtArea = document.createElement('textarea'); txtArea.value = this.result; document.body.appendChild(txtArea); }; reader.readAsText(file); }, errorHandler); }, errorHandler); }; reader.readAsText(file); }, errorHandler); }, errorHandler); }
  4. Many listeners for one promise! var promise = writeFoo() promise.done(log,

    logError) promise.done(updateStats, error) promise.done(displayInfo, displayError)
  5. Many listeners for one promise! function writeFooAndLog(){ var promise =

    writeFoo() promise.done(log, error) return promise; } var promise = writeFooAndLog(); promise.done(successDialog, errorDialog)
  6. Attach listeners even when it's done! var promise = readFoo()

    promise.done(log, error) ==> resolves with cache...
  7. You know, order matters! var img = new Image(); img.src

    = "sprite.png"; img.onload = function(){ //never called }
  8. What if... var img = new Image(); var promise =

    img.load("sprite.png"); promise.done(function(){ })
  9. Attach listeners even when it's done! var promise = readFoo()

    promise.done(log, error) ==> resolves with cache... promise.done(updateStats, error) promise.done(displayInfo, error)
  10. The same is true for fails var promise = writeFoo()

    promise.done(log) promise.fail(revertTransaction) promise.fail(logError)
  11. Then and errors! promise .then(success , error) .then(success2 , error2)

    .then(success3 , error3) .then(success4, error4); * not in jQuery
  12. Q.js Readme return foo() .then( function (value) { throw new

    Error("Can't bar."); }, function (error) { // We only get here if "foo" fails } );
  13. Error handler AFTER callback return foo() .then(function (value) { throw

    new Error("Can't bar."); }) .fail(function (error) { // We get here with any callback error });
  14. Why? .then() //=> promise 1: Then always returns promise 2:

    Promise catches all errors 3: And passes them to the last promise
  15. Show me the code function getFoo(){ var deferred = Q.defer();

    FS.readFile("foo.txt", function (error, text) { if (error) { deferred.reject(new Error(error)); } else { deferred.resolve(text); } }); return deferred.promise; }
  16. Create Deferred function getFoo(){ var deferred = Q.defer(); FS.readFile("foo.txt", function

    (error, text) { if (error) { deferred.reject(new Error(error)); } else { deferred.resolve(text); } }); return deferred.promise; }
  17. Return promise from deferred function getFoo(){ var deferred = Q.defer();

    FS.readFile("foo.txt", function (error, text) { if (error) { deferred.reject(new Error(error)); } else { deferred.resolve(text); } }); return deferred.promise; }
  18. success == resolve function getFoo(){ var deferred = Q.defer(); FS.readFile("foo.txt",

    function (error, text) { if (error) { deferred.reject(new Error(error)); } else { deferred.resolve(text); } }); return deferred.promise; }
  19. error == reject function getFoo(){ var deferred = Q.defer(); FS.readFile("foo.txt",

    function (error, text) { if (error) { deferred.reject(new Error(error)); } else { deferred.resolve(text); } }); return deferred.promise; }
  20. Wrap it in function function getFoo(){ var deferred = Q.defer();

    FS.readFile("foo.txt", function (error, text) { if (error) { deferred.reject(new Error(error)); } else { deferred.resolve(text); } }); return deferred.promise; }
  21. All

  22. var promise1 = $.ajax(one); var promise2 = $.ajax(two); var promise3

    = $.ajax(three); Q.all([promise1, promise2, promise3]) .done(letUserKnow);
  23. var promise1 = $.ajax(); var promise2 = $.ajax(); var promise3

    = $.ajax(); Q.all([promise1, promise2, promise3]) .done(letUserKnow)
  24. var promise1 = $.ajax(); var promise2 = $.ajax(); var promise3

    = $.ajax(); Q.all([promise1, promise2, promise3]) .done(letUserKnow);
  25. var promise1 = $.ajax(); var promise2 = $.ajax(); var promise3

    = $.ajax(); Q.all([promise1, promise2, promise3]) .done(letUserKnow);
  26. Many listeners for one promise! var promise = writeFoo() promise.done(log)

    promise.done(updateStats) promise.fail(logError) promise.fail(displayError)