$http не срабатывает внутри фабрики Angular

Question

Добрый день.

Решил вынести функционал получения данных в отдельную фабрику, но по непонятной мне причине $http не отрабатывает вообще.

Фабрика:

angular
.module('quApp')
.factory('ingredientFactory', function($http){

    return {
    getIngrs : function(){
        var res = {};
        $http.get('/ingredient')
            .then(function(data) {
                res = data;
            },
            function(err) {
                res = err;
            });
        return res;
       }
    };
});

При вызове фабрика возвращает пустой res. Где я напортачил?

score 1 · Answer 1 · answered Aug 07 '15 at 14:49

Как правильно выразился товарищ Mayorov - проблема в асинхронности. В данном случае можно использовать промисы:

/* global angular */

angular.module('quApp', []).factory('ingredientFactory',
function($http, $q){

    return {
        getIngrs : getIngrsFn
    };

    function getIngrsFn(){
        var defer=$q.defer();

        $http({method: 'GET', url: '/ingredient'})
        .success(function(data) {
            defer.resolve(data);
        }).error(function(err) {
            defer.reject(err);
        });

        return defer.promise;
    };

});

Использование в контроллере:

ingredientFactory.getIngrs().then(
    function(data){Удачка;},
    function(error){Печалька;}
);

Документация по $q

Хабр раз - 189084 - Promise-ы в AngularJS;

Хабр два - 221111 - Правильное использование promise в angular.js

(оказывается, с низкой репутацией, нельзя добавить больше одной ссылки =\ );

P.S.: И да, лично по моему скромному мнению, всё выше перечисленное пойдет для общего развития, а для конкретной ситуации как-то бессмысленно. Если бы в фабрике выполнялась какая-то пост обработка данных, то да, а так мы просто меняем $http на $q.

score 0 · Answer 2 · edited Apr 13 '17 at 12:53

И опять попытка синхронного возврата значения из асинхронного кода... Вот вам ссылки, которые я нашел. Там не про angular, а про jquery - но ошибка та же самая.

Как вернуть значение из вложенной функции?

Как вернуть переменную из функции javascript?

Вернуть $.ajax data в return функции

score 0 · Answer 3 · answered Aug 05 '15 at 08:19

    gameServices.factory('Content', ['$http',
        function($http) {
            var service = function() {
                this.items = [];          
            };
        service.prototype.nextPage = function(callback) {
    //Тут загрузка контента
 $http.get(url).
            success(function(data, status, headers, config) {
                this.items = data;
                if (typeof callback == 'function') {
                    callback();
                }
            }.bind(this)).
            error(function(data, status, headers, config) {});
        }
            return service;
        }
    ]);

$http не срабатывает внутри фабрики Angular

3 Answers3