Unpredictable and incomplete $http response in angularjs

Question

I was developing my application using a json file on my local computer and am now ready to start testing on the server but I am obtaining incomplete responses from my $http requests for some reason.

I have the following service that requests all of the data using 4 promises:

angular
.module('myApp')
.service('ProductService',
    ['$http','$q', '$filter', '$resource' ,ProductService]);

function ProductService($http,$q,$filter) {

    var self = this;
    //Callable members of this service---------------
    self.getProducts = getProducts;
    self.getVendors = getVendors;
    self.getCategories = getCategories;
    self.getAllData = getAllData;
    self.getInventory = getInventory;
    //---------------//---------------//---------------

function getProducts() {
    var d = $q.defer();
    $http({method : 'GET', url : GET_PRODUCTS_URL})
    .then(function(response) {
        d.resolve(response.data);
    },function (error) {
        d.reject(error);
    });
    return d.promise;
}

function getVendors() {
    var d = $q.defer();
    $http({method : 'GET', url : GET_VENDORS_URL})
    .then(function(response) {
        d.resolve(response.data);
    },function (error) {
        d.reject(error);
    });
    return d.promise;
}

function getCategories() {
    var d = $q.defer();
    $http({method : 'GET', url : GET_CATEGORIES_URL})
    .then(function(response) {
        d.resolve(response.data);
    },function (error) {
        d.reject(error);
    });
    return d.promise;
}

function getInventory() {
    var d = $q.defer();
    $http({method : 'GET', url: GET_ON_HAND_URL})
    .then(function(response) {
        d.resolve(response.data);
    },function(error) {
        d.reject(error);
    });
    return d.promise;
}

function getAllData() {
    var promises = [];
    promises.push(self.getCategories());
    promises.push(self.getVendors());
    promises.push(self.getProducts());
    promises.push(self.getInventory());
    return $q.all(promises);
}
}

Problem:

For some reason the individual http requests are sometimes coming back incomplete and I am also somehow getting Unexpected token errors where the closing bracket ] from the part of the $http request is left behind somehow. Very strange. I am sure the response JSON is correct. Here is an example request url:

http://jadran.sdsu.edu/jadrn002/servlet/surfing/data?action=vendor

What can possibly cause this type of behavior?

Answer 1

After following the commenters' suggestions I rewrote the entire service to not use defer and it is much better. This is the new version:

angular
    .module('myApp')
    .factory('ProductService',
        ['$q', '$filter', '$resource' ,ProductService]);

function ProductService($q,$filter, $resource) {

     return $resource(API_URL, 
         {}, { 
             products: { method: 'GET', params: { action: 'product'}, isArray: true},
             vendors: { method: 'GET', params: { action: 'vendor'}, isArray: true},
             categories: { method: 'GET', params: { action: 'category'}, isArray: true},
             inventory: { method: 'GET', params: { action: 'on_hand'}, isArray: true},
         }
     );

}

These all include a $promise property so I can call the following:

$q.all([
  ProductService.categories().$promise,
  ProductService.vendors().$promise,
  ProductService.products().$promise,
  ProductService.inventory().$promise
  ])
.then(updateModelWithData)
.catch(function (error) {
  console.log('There was an error fetching data:');
  console.log(error);
});

It took me a long time to figure this out but I finally got it.

As a side-note, I did not realize it earlier but I was having issues on the backend side where the simultaneous requests were getting mixed up and the response was not correct. I have fixed both problems now. Thank you for your suggestions.