Невозможно прочитать свойство тогда неопределенной ошибки в угловом JS

Question

Это мой сервис и контроллер angularJS.

sampleApp.factory('BrandService', function($http, $q) { 

    var BrandService = {}; 
    var BrandList = []; 

    BrandService.GetBrands = function() { 
     var Info = {}; 
     Info.Action = "GET"; 
     Info = JSON.stringify (Info); 

     var req = { 
      url: BrandURL, 
      method: 'POST', 
      headers: { 'Content-Type': 'application/json'}, 
      data: Info 
     }; 
     if (BrandList.length == 0) 
     { 
      $http(req) 
      .success(function(response) { 
       BrandList = response.data 
       alert ('Brand Fetching is successful'); 
       return response.data; 
      }) 
      .error(function (data, status, headers, config) { 
       alert ('Brand Fetching Error'); 
       alert (status); 
       alert (data); 
      }); 
     } 
     else 
     { 
      var deferred = $q.defer(); 
      deferred.resolve(BrandList); 
      return deferred.promise; 
     } 
    } 

    return BrandService; 
}); 


sampleApp.controller('BrandController', ['$scope', 'BrandService', function ($scope, BrandService){ 

    $scope.Brands = []; 

    $scope.GetBrands = function() { 
     BrandService.GetBrands().then(function(data) { 
      $scope.Brands = data; 
     }); 
    }; 

    $scope.GetBrands(); 

}]); 

Когда контроллер загружается, я вижу следующую ошибку.

Не удается прочитать свойство «затем» неопределенной при л $ scope.GetBrands (Controllers.js: 337).

Может понравиться кому-то помочь мне, что я делаю не так?

Answer 1

Вы не возвращаете обещание в случае запроса HTTP, когда данные еще не кэшированы.

Правильный код будет:

sampleApp.factory('BrandService', function($http, $q) { 

    var BrandService = {}; 
    var BrandList = []; 

    BrandService.GetBrands = function() { 

     var req = { 
      url: BrandURL, 
      method: 'POST', 
      headers: { 
       'Content-Type': 'application/json' 
      }, 
      data: JSON.stringify({Action: 'GET'}) 
     }; 

     if (BrandList.length) { 
      return $q.when(BrandList); 
     } 

     return $http(req) 
      .success(function(response) { 
       BrandList = response.data 
       alert('Brand Fetching is successful'); 
       return response.data; 
      }) 
      .error(function(data, status, headers, config) { 
       alert('Brand Fetching Error'); 
       alert(status); 
       alert(data); 
      }); 
    } 

    return BrandService; 
}); 

Также вам не нужно создавать фиктивный отложенный объект, вы можете вернуть разрешенное обещание с $q.when.