$q.all() not running all promises before then clause

Question

I need to finish all my ajax calls to enable a button, but I am not getting all my promises done before enabling the button.

I have this piece of code with all my ajax gets:

                $q.all([
                    $scope.load_ocupacoes(),
                    $scope.load_tipos_pisos(),
                    $scope.load_tipos(),
                    $scope.load_caracteristicas(),
                    $scope.load_amenidades(),
                    $scope.load_subtipos(true, 'incluir')
                ]).then(function() {
                    console.log('loading complete !!!');
                    $scope.theglyphicon = 'fa fa-check fa-fw';
                    $scope.isDisabledButton = false;
                });

Each load function is a $http.get, like that:

    $scope.load_ocupacoes = function() {

        $http.get(url_api_status_ocupacao)
            .success(function(response) {
                console.log(response);
                $scope.status_ocupacoes = response;
            })
            .error(function(response) {
                console.log(response);
                ngToast.create({
                    className: 'danger', 
                    content: 'Não foi possível recuperar a lista.'
                });
            });
    };

I have also tried this way:

        $scope.load_ocupacoes = function() 
{$resource(url_api_status_ocupacao).query().$promise.then(function(response) {
                console.log(response);
                $scope.status_ocupacoes = response;
            });
    };

And this... but with the same problem:

    $scope.load_ocupacoes = function() {
        $timeout(function(){
            $scope.$apply(function() {
                $scope.status_ocupacoes = appFactory.recuperarLista(url_api_status_ocupacao)
                    .then(function(result) {
                        console.log(result);
                        $scope.status_ocupacoes = result;
                    });
            });
        });
    };

But, I am getting the message 'loading complete !!!' before the end of all loading.

Is there any problem with this approach?

I have did it now: $q.all([ $http.jsonp('http://ci.dev/api/loadliststatusocupacoes/?callback=JSON_CALLBACK').then(function(response) { $scope.status_ocupacoes = response.data; console.log('status_ocupacoes'); }), .... ]).then(function(){ console.log('loading complete !!!'); }); But it did not call the services.... Nothing happens. — Olivertech, Jan 20 '17 at 18:23

fdreger · Answer 1 · 2017-01-20T19:29:33.353

2

There could be more errors, but the basic misunderstanding is that $q.all takes promises, and all your functions return undefined (because they don't have a return statement) - so instead of getting six promises, your $q.all gets six undefineds. AFAIK, $http.get returns a promise by default, so one way to fix it would be to just add return statement to each of your functions, in front of $http.get, like this:

   $scope.load_ocupacoes = function() {   
        return $http.get(url_api_status_ocupacao)
            .then(function(response) {

            });
    };

edited Jan 20 '17 at 19:29

answered Jan 20 '17 at 07:12

fdreger

12,264
1
36
42

Thanks. But how can I load my variable ? with the response ? – Olivertech Jan 20 '17 at 17:39
I don't understand your question? Which variable? What do you mean by "load by response"? You don't need to change any of your code - just add `return` to all your `$http.get` calls - otherwise you don't return the promise. – fdreger Jan 20 '17 at 19:28
oh, I haven't noticed - and use then instead of success and error (fist parameter is the success callback, the second is the error callback) – fdreger Jan 20 '17 at 19:30

score 0 · Answer 2 · answered Jan 20 '17 at 07:05

I guess $q.all accept promises.

This must be apply to all other's related method.

$scope.load_ocupacoes = function() {   
        $http.get(url_api_status_ocupacao)
            // use then instead success
            .then(function(response) {
                 // return raw promise instead actual value
                return response;
            }, console.log('error));
    };

score 0 · Answer 3 · answered Jan 20 '17 at 07:11

$q.all requires an array of promises but your are providing a function which is neither returning any promise.

You can do this :

    $q.all([
$http.get(url_api_status_ocupacao),
$http.get(url_api1),
$http.get(url_api2)
]).then(function() {
 ......
                    });

score 0 · Answer 4 · answered Jan 20 '17 at 19:00

I have resolved my problem with this approach:

var promises = [appFactory.recuperarLista(url_api_status_ocupacao),
                appFactory.recuperarLista(url_api_tipos_pisos),
                appFactory.recuperarLista(url_api_caracteristicas),
                appFactory.recuperarLista(url_api_amenidades)
                ];
$q.all(promises).then(function (responses) {
    $scope.status_ocupacoes = responses[0];
    $scope.tipos_pisos = responses[1];
    $scope.caracteristicas = responses[2];
    $scope.amenidades = responses[3];
}).then(function() {
    console.log('All Loading completed !!!');
});

And I made a factory returning promises:

angular.module('starter.services', ['datatables'])
.factory('appFactory', function($http, $q) {

 return {
       recuperarLista: function(url) {

            var deferred = $q.defer();

            $http({ method: "GET", url: url })
                .success(function (data, status, headers, config) {
                    deferred.resolve(data);
                }).error(function (data, status, headers, config) {
                deferred.reject(status);
            });

            console.log('loading for ' + url + ' was completed !!!');

            return deferred.promise;
        }
    };
});

Now I am getting this console output:

loading for api/loadliststatusocupacoes was completed !!! 
services.js:171 
loading for api/loadlisttipospisos was completed !!!
 services.js:171 
loading for api/loadlistcaracteristicas was completed !!!
 services.js:171 
loading for api/loadlistamenidades was completed !!! 
services.js:171
All Loading completed !!! 
imovel-controller.js:690

$q.all() not running all promises before then clause

4 Answers4