angularjs и $ http request

Question

Здравствуйте, я новичок в AngularJs и пытаюсь получить данные json с моего сервера. Когда служба выполняется, я вижу ясный ответ в Fiddler. Но успех или функция ошибки не выполняются, поэтому служба возвращает пустой массив.

var app = angular.module('imageApp', []); 

app.service('imageService', function ($http) { 
    var imageModels = []; 
    this.Images = function (url) { 
     $http({ method: 'GET', url: url }).success(function (data) { 
      imageModels = data; 
     }).error(function (data) { 
      imageModels = data || "Request failed"; 
     }); 

     return imageModels; 
     }; 
    }; 
}); 

app.controller('ImageController', function (imageService, $scope) { 
    $scope.fetch = function (url) { 

     $scope.url = url; 
     $scope.ImageModels = imageService.Images($scope.url); 
    }; 
}); 

Answer 1

$ http возвращает результаты асинхронно. Таким образом, return imageModels будет выполняться до того, как будут выполнены обратные вызовы success() или error(). Вам нужно дождаться обещания, которое создает $ http для разрешения - используйте then() в вашем контроллере.

Вместо того, чтобы повторять его здесь, увидеть решение от @Pete BD: https://stackoverflow.com/a/12513509/215945

Answer 2

Update ваш сервис, как это.

app.service('imageService', function ($http, $q) { 
    this.Images = function (url) { 
     return $http({ method: 'GET', url: url }).success(function (data) { 
      $q.resolve(data); 
     }).error(function (data) { 
      $q.reject(data || "Request failed"); 
     }); 
    }; 
}); 

Тогда ваш контроллер, вы можете теперь ждать обещания, которое будет возвращено из службы.

imageService.Images($scope.url) 
    .then(function(response){ 
     // success 
    }).catch(function(error){ 
     // error 
    }) 

Так что случилось? На вашем сервисе обратите внимание, что мы добавили $q, чтобы создать обещание, чтобы мы могли reslove и reject ответ от $http и сделать его «доступным» на контроллере.

Написание службы для обработки запроса $ http всегда является для меня хлопот, поэтому я создал этот angular module для обработки вещей для меня. Если вы хотите, вы можете проверить это.