Search code examples
javascriptjqueryajaxpromisedeferred

Working with Ajax Promises / Deferred


I am trying to get an Ajax promise using the code below. Because my function makes another ajax call before initiating the actual one , for getting the authKey, The promise (that should have been returned) from the actual call is null, & I cannot use .then() on it because I think I am not getting anything in return from it. I am not sure why.

What am I doing wrong here? Is there any other way to go about this. I call getAjaxPromise() like mentioned below but get null in return:

   getAjaxPromise(myUrl, true, myType, myContentType, mySuccessFunction, myFailureFunction, 
myData, true)
.then(function(data) //.then() gives undefined-null error
      {
        //Do something with the data returned form actual Ajax call.
      });

self.getAjaxPromise = function(url, async, type, contentType, successCallback, 
errorCallback, data, isSecureCall) 
{
  if (isSecureCall) {
    var tokenPromise = getTokenPromiseFromServer(); //Another Ajax call to get latest token from service
    tokenPromise.then(function(tokenData) {  //This then runs fine
      return $.ajax({
        beforeSend: function(request) {
          request.setRequestHeader("authKey", tokenData.key);
        },
        url: url,
        async: async,
        type: type,
        contentType: contentType,
        success: successCallback, //Success callback runs fine, then() does not
        error: errorCallback, //Error callback runs fine, then() does not
        data: JSON.stringify(data)
      });
    });
  } else { //Just one ajax call 
    return $.ajax({
      beforeSend: function(request) {
        request.setRequestHeader("authKey", "anonymous");
      },
      url: url,
      async: async,
      type: type,
      contentType: contentType,
      success: successCallback,
      error: errorCallback,
      data: JSON.stringify(data)
    });
  });
}
};


Solution

  • you forgot to return the getTokenPromiseFromServer
    if isSecureCall is true your function return null

    self.getAjaxPromise = function(url, async, type, contentType, successCallback, 
    errorCallback, data, isSecureCall) 
    {
      if (isSecureCall) {
        return getTokenPromiseFromServer().then(function(tokenData) {
          return $.ajax({
            beforeSend: function(request) {
              request.setRequestHeader("authKey", tokenData.key);
            },
            url: url,
            async: async,
            type: type,
            contentType: contentType,
            success: successCallback, //Success callback runs fine, then() does not
            error: errorCallback, //Error callback runs fine, then() does not
            data: JSON.stringify(data)
          });
        });
      } else { //Just one ajax call 
        return $.ajax({
          beforeSend: function(request) {
            request.setRequestHeader("authKey", "anonymous");
          },
          url: url,
          async: async,
          type: type,
          contentType: contentType,
          success: successCallback,
          error: errorCallback,
          data: JSON.stringify(data)
        });
      });
    }
    };