blgrnboy blgrnboy - 3 months ago 7
Ajax Question

Expose function and return object

I am trying to create an ajaxHelper module that should be able to expose some number of functions, and when they are called, should return a helper object that has either the data retrieved from an AJAX call, or errors associated with that AJAX call.

Here is something along the lines of what I am thinking:

define("helpers-ajaxDataRetriever", ["jquery"], function ($) {

var helper = {};

helper.getIndexData = function() {
fnIndexData();
return helper;
}

var fnIndexData = function () {
$.ajax({
url: nwatchBaseUrl + '/api/HomeApi/NodeSummary'
}).success(function (returnedData) {
helper.success = true;
helper.data = returnedData;
}).fail(function (jqXHR, textStatus) {
helper.success = false;
helper.error.jqXHR = jqXHR;
helper.error.textStatus = textStatus;
});
}

});


I then want other modules that import this ajaxHelper to be able to call the function (such as getIndexData), which would ultimately populate the helper object, and then be able to reference the various properties, such as the boolean success, data, or error objects.

How do I go about doing this?

Answer

For it to work the way you are expecting, the module has to return the properties that you like to expose to the outside world ( for it to be used by other modules).

And since ajax is asynchronous, it is better you tackle such scenarios with callbacks instead accessing the variables directly. As you do not know when the ajax call will successfully complete and return you the data.

define("helpers-ajaxDataRetriever", ["jquery"], function($) {

  var helper = {};
  // you will pass in the options
  // which will contains the success and error 
  // callbacks, along with additional props
  // that you wanna pass in and use
  helper.getIndexData = function(options) {
    fnIndexData(options);
  }

  var fnIndexData = function(options) {
    $.ajax({
      url: options.nwatchBaseUrl + '/api/HomeApi/NodeSummary'
    }).success(function(returnedData) {
          options.success && options.success.apply(null, arguments);
    }).fail(function(jqXHR, textStatus) {
       options.error && options.error.apply(null, arguments);
    });
  }

  // You return the object, which are the public methods
  // or properties which you wanna expose when this module is used
  return {
    getIndexData: getIndexData
  }
});

// This is when you wanna use the above exposed function
// in any module
define("use-ajax", ["helpers-ajaxDataRetriever"], function(customAjax) {

    var options = {
        success: function(data) {
            console.log('success');
            // use the data
        }, error: function(jqXHR, textStatus) {
             console.log('failure');
             // you will have access to the 
             // arguments of the error function here
        },
        nwatchBaseUrl: 'https://google.com/'
    }

    customAjax.getIndexData(options);
});

And since we only want to expose getIndexData in the above example, we can completely get rid of the helper namespace and just return the function definition.

You could also achieve the save by using the concept of promise

Comments