jQuery Deferreds and Promises

Transcript

1. jQuery Deferreds & Promises Eli Perelman @eliperelman

2. What are deferreds?

3. Provide a system to register callbacks into neatly managed queues

   DEFERREDS

4. WITHOUT DEFERREDS var  validateUser  =  function  (  username,  password,  callback

    )  {          if  (  username  ===  ‘bob’  &&  password  ===  ‘123’  )  {                  callback(  ‘success’  );          }  else  {                  callback(  ‘failure’  );          }   };   validateUser(  ‘bob’,  ‘123’,  function  (  result  )  {          if  (  result  ===  ‘success’  )  {                  location  =  ‘/dashboard’;          }  else  {                  showError(  ‘Invalid  login.’  );          }   });    

5. WITH DEFERREDS var  validateUser  =  function  (  username,  password  )

    {          var  deferred  =  $.Deferred();          if  (  username  ===  ‘bob’  &&  password  ===  ‘123’  )  {                  deferred.resolve();          }  else  {                  deferred.reject();          }          return  deferred.promise();   };   validateUser(  ‘bob’,  ‘123’  )          .done(  function  ()  {                  location  =  ‘/dashboard’;          })          .fail(  function  ()  {                  showError(  ‘Invalid  login.’  );          });    

6. Deferreds work with synchronous AND asynchronous functions.

7. Since jQuery 1.5, the $.ajax module uses deferreds.

8. What are promises?

9. Provide a common API for consuming code to register callbacks,

   sync or async. PROMISES

10. Deferreds Promises .then .then .done .done .fail .fail .always .always

    .reject .resolve .pipe .pipe .promise .promise .isResolved .isRejected

11. Coding time!