Using promises with modular JS

Question

I am trying to apply the modular JS pattern in my code, but am having a hard time implementing promises. I am used to to promises in 1 line using "then", but now I have separate functions and each one is calling the server and returning a value to the other function, I don't know how I can do this. I am confused how I can use done & resolve at the same time.

Here's my code below:

   //I want to call a function, makeLinksObject(), which will call the another function that calls the server
   var formattedObject = makeLinksObject();
   formattedObject.done(function (renderedObject) {
            render(renderObject);
                    })

  function makeLinksObject() {
            //here I want to call another function that will call the server
            var dfd = getLastTimeUpdated();
            var linksArray = [];
            var linksObject = {};
            //get site updated date
            dfd.done(function (dateUpdated) {
                $.each(links, function (index, value) {
                    var linkObject = {};
                    obj.Title = value.Title.toLowerCase();
                    linksArray.push(obj);
                });

                linksObject = {
                    lblcallerId: "some value here"
                    links: linksArray
                }

            }); // end done

            return dfd.resolve(linksObject);
        }
        function getLastTimeUpdated() {
            var modificationUrl = "serverurl"
            dfd = $.ajax({
                url: modificationUrl,
                method: "GET",
                headers: {
                    "accept": "application/json;odata=verbose"
                }
            });
            dfd.done(function(data){
                dfd.resolve(data.d.LastItemModified);
            })

               return dfd.promise(); 

        }

How do I return the value from server from function 3, to be used in function 2, and the result of function 2, to be used in function 1, then I can draw my html in function 1.

Currently, I am having an error in the second function and it's not recognizing my deferred object.

I thought about writing code that will have nested then, then, but I want to use modular code to make my code organized. Any help would be appreciated.

Answer 1

$.ajax() returns a jQuery promise object, $.Deferred() is not necessary and can be removed; substitute .then() for .done() where you want to return a value other than the original promise value returned from $.ajax(), use return within function calls and .then(). Note, you could also include error handling to the pattern by chaining .fail() to then last .then() in each chain

   var formattedObject = makeLinksObject();

   formattedObject
   .done(function(renderedObject) {
     render(renderObject);
   })

   function makeLinksObject() {
     var dfd = getLastTimeUpdated();
     var linksArray = [];
     var linksObject = {};

     return dfd.then(function(dateUpdated) {
       $.each(links, function(index, value) {
         var linkObject = {};
         obj.Title = value.Title.toLowerCase();
         linksArray.push(obj);
       });

       linksObject = {
         lblcallerId: "some value here",
         links: linksArray
       }

     })
     .then(function() {
       return linksObject
     });
   }

   function getLastTimeUpdated() {
     var modificationUrl = "serverurl"
     return $.ajax({
       url: modificationUrl,
       method: "GET",
       headers: {
         "accept": "application/json;odata=verbose"
       }
     })
     .then(function(data) {
       return data.d.LastItemModified;
     })

   }