Data service class pattern for web service heavy front end projects. Supports calls to multiple sources with a single callback.

dataservice

/*******************************************************************************
* Global data service utility "class"
*******************************************************************************/

NAMESPACE.DataService = function(){
  var foo = {
    set : function(obj, callback, errorConfig){
      var payload = JSON.stringify(obj),
        config = {
          url: '/foo/update/',
          type: 'POST',
          data: payload
        };
      return processRequest(config, callback, errorConfig);
    },
    get : function(obj, callback, errorConfig){
      var config = {
          url: '/foo/detail/' + obj.id
        };
      return processRequest(config, callback, errorConfig);
    },
    add : function(obj, callback, errorConfig) {
      var payload = JSON.stringify(obj),
        config = {
          url: '/foo/add',
          type: 'PUT`',
          data: payload
        };
      return processRequest(config, callback);
    },
    remove : function(obj, callback, errorConfig) {
      var config = {
          url: '/foo/delete/'+obj.id,
          type: 'DELETE'
        };
      return processRequest(config, callback);
    }
  }, //foo
  multi = function(calls, callback){
    //Pass multiple calls in and execute callback after all complete
    //cant call the same service as currently structured. uses passed in function name to index the data returns
    //calls[] looks like: [{name:'foo', obj:obj, errorConfig: errorConfig}, {name:'bar', obj:obj, errorConfig: errorConfig}]
    var callsComplete = 0,
      dataSet = {},
      ds = new NAMESPACE.dataService();

    $.each(calls, function(call){
      ds[call.name](call.obj, function(data){
        dataSet[call.name] = data;              //keep track of who returned what
        callsComplete ++;                       //how many done?
        if(callsComplete === calls.length){
          callback(dataSet);                    //single callback with an object holding the various returns
        }
      }, call.errorConfig);

    });
  },
  //private methods
  //generic ajax method. (overrides defaults, callback function, custom error handling object)
  processRequest = function(config, callback, errorConfig){
    var defaults = {
      type: 'GET',
      contentType: "application/json; charset=utf-8",
      dataType: 'json'
    };
    var settings = $.extend({},defaults,config);
    $.ajax(settings).done(function(data){
      if(typeof callback === 'function') {callback(data);}
      return true;
    }).fail(function(xhr, textStatus, errorThrown) {
      errorHandler(xhr, textStatus, errorThrown, errorConfig);
      return false;
    });
  },

  errorHandler = function(xhr, textStatus, errorThrown, errorConfig){
    //pass in   custom handlers for errors    
    if(errorConfig){
      var customError = false;
      $.each(errorConfig, function(i){
        if(this.status === xhr.status && typeof this.action === 'function'){
          this.action(xhr);
          customError = true;
        }
      });
      if(customError){return;}
    }
    // generic handler
    if (xhr.status === 401) {
      //window.location = '/auth/'; //?ourl='+document.URL;
    } else if (xhr.status === 403) {
      console.log("Requested object not found!");
    } else if (xhr.status === 404) {
      console.log("Requested service not found!");
    } else if (xhr.status === 405) {
      console.log('Method not allowed');
    } else if (xhr.status === 420) {
      console.log("Unable to process request. " + JSON.stringify(xhr));
    } else if (xhr.status === 500) {
      console.log('server error');
    } else {
      console.log("Failed dataService request! " + errorThrown + " :: " + textStatus);
    }
    console.log("Failed request");
  };
  //public methods
  return {
    foo: foo,
    multi: multi
  };
};