Вызов AngularJS $http в службе, возврат разрешенных данных, а не обещаний

Я могу придумать два способа сделать это. Первое однозначно лучше второго.

Первый способ: использование свойства resolve маршрутов

Вы можете использовать свойство resolve объекта конфигурации маршрута, чтобы указать, что обещание должно быть разрешено, а разрешенное значение должно использоваться для значения одной из ваших зависимостей контроллера, чтобы, как только ваш контроллер запустится, значение было немедленно доступно.

Например, предположим, что у вас есть следующий сервис:

app.service('things', ['$http', '$q', function ($http, $q) {
    var deferred = $q.defer();

    $http({
        method: 'GET',
        url: '/things',
        cache: true
    }).success(function (data) {
        deferred.resolve(data);
    }).error(function (msg) {
        deferred.reject(msg);
    });

    return deferred.promise;
}]);

Затем вы можете определить свой маршрут примерно так:

$routeProvider.when('/things', {
    controller: ['$scope', 'thingsData', function ($scope, thingsData) {
        $scope.allThings = thingsData;
    }],
    resolve: {
        thingsData: ['things', function (things) {
            return things;
        }]
    }
});

Ключ в объекте resolve соответствует имени второй зависимости для контроллера, поэтому даже если он возвращает обещание, это обещание будет разрешено до запуска контроллера.

Второй способ: сделайте запрос задолго до того, как вам понадобятся данные

Второй способ, который совсем не идеален и, вероятно, в какой-то момент укусит вас за задницу, заключается в том, чтобы сделать запрос данных на ранней стадии, например, когда ваше приложение инициализируется, а затем фактически получить данные позже. , скажем, на странице, для перехода на которую требуется 3 клика с главной страницы. Скрестим пальцы, если звезды сошлись, ваш http-запрос будет возвращен к тому времени, и у вас будут данные для использования.

angular.module('myModule').factory('myService', ['$http', '$q', function($http, $q) {
    var data = [];

    function fetch() {
        $http.get('/server/call').then(function (d) { data = d; });
    }

    // Public API
    return {
        fetchData: fetch,
        myServiceCall: function () {
            return data;
        }
    };
}]);

Затем в функции запуска вашего модуля сделайте запрос:

angular.module('myModule').run(['myService', function (myService) {
    myService.fetchData();
});

Затем в контроллере для страницы, которая гарантированно запустится как минимум через 3 секунды после запуска приложения, вы можете сделать так, как вы предложили:

 angular.module('myModule').controller('deepPageCtrl', ['$scope', 'myService', function ($scope, myService) {
      $scope.data = myService.myServiceCall();
      if (angular.isArray($scope.data) && $scope.data.length === 0) {
           panic("data isn't loaded yet");
      }
  }]);

Бонус, столь же плохой третий способ: синхронный запрос AJAX

Сделайте, как предлагает ricick, и используйте синхронный запрос AJAX, возможный с помощью метода jQuery .ajax().

Это невозможно, так как HTTP-вызовы по своей сути асинхронны. То есть нужно дождаться ответа сервера.

Служба $resource обходит это, возвращая прокси-объект, который заполняется возвращенными данными при ответе сервера, но он все еще не полностью разрешен в одной строке.

Изменить:

На самом деле можно выполнять синхронные HTTP-запросы с помощью метода jquery ajax, установив для параметра «async» значение false.

Вы можете создать службу, которая обертывает это, однако ваше приложение будет «заблокировано», пока запрос ожидает ответа сервера, поэтому в большинстве случаев это будет плохой практикой. Существуют и другие ограничения на этот тип запроса.

См. документы для более подробной информации:

http://api.jquery.com/jQuery.ajax/

Давным-давно (в угловатых землях, где-то в прошлом году) так оно и было.

Но теперь это не так, я думаю, это связано с различиями в поведении обещаний в представлении и контроллере, подробнее здесь об устаревании: Angularjs обещает не привязываться к шаблону в 1.2