How to execute all promises in angular before proceding?

Question

I have to gather data from internet in order to show it and I am using promises in order to make it. I need all the requests to be done in order to proceed with the code. Before executing the finally I need all requests to be done. Here is the code:

var start = function(){
    $rootScope.albums = [];
    var albums = [];

    facebookConnectPlugin.api('/me?fields=albums{cover_photo,name}&access_token=' + $scope.user.authResponse.accessToken, [],
        function (response) {
            $ionicLoading.show();
            var alb = response.albums.data; // array 
            var sequence = $q.all([]);

            angular.forEach(alb, function(album) {
                sequence = sequence.then(function() {
                    return $timeout(function () {
                        facebookConnectPlugin.api('/' + album.cover_photo.id + '?fields=picture&access_token=' + $scope.user.authResponse.accessToken, null,
                            function (response) {
                                album.c = response.picture;
                                albums.push(album);
                            },
                            function (errObj) {
                                alert(JSON.stringify(errObj));
                            });
                    },100);
                });
            });

            sequence.finally(function () {
                $rootScope.albums = albums;
                $ionicLoading.hide();
                $state.go('tab.albums');
            });
       },function (response) {
            alert(JSON.stringify(response));
       });
  }

I believe I shouldn't use $timeout, but that was the only way I found to make it work. Also, sometimes it doesn't return all the requests. I am definitely doing something wrong. If I use a higher $timeout value, like 5000, I can get all the values, but I dont want to depend on it to make it work. All albums cover needs to be gathered before executing the finally code. What should I change in order to run all the requests before runing the finally function?

I've used this code for reference and also have searched the web for a long time other references: https://gist.github.com/slavafomin/8ee69f447765bc5c5e19

You need $q.all() `var promiseHash = {}; promiseHash.data = Data.query().$promise;` `$q.all(promiseHash)` — Jesus Carrasco, Mar 01 '18 at 23:00
Yes, you should not use a timeout. You should just [get a promise for the api call](https://stackoverflow.com/q/22519784/1048572) and use that. — Bergi, Mar 01 '18 at 23:14

Josué Morales · Accepted Answer · 2018-03-02T23:58:23.033

2

Please try:

var start = function(){
$rootScope.albums = [];
facebookConnectPlugin.api('/me?fields=albums{cover_photo{picture},name}&access_token=' + $scope.user.authResponse.accessToken, [],
    function (response) {
        $ionicLoading.show();
        var albums = response.albums.data.map(album => {
            album.c = album.cover_photo.picture;
            return album;
        });
        $rootScope.albums = albums;
        $ionicLoading.hide();
        $state.go('tab.albums');
   },function (response) {
        alert(JSON.stringify(response));
   });
}

EDIT: you don't need to use angular $q service, you just need to change your requestPath parameter. Please see my updates above.

Please refer to https://developers.facebook.com/docs/graph-api/ for more information.

edited Mar 02 '18 at 23:58

answered Mar 01 '18 at 23:19

Josué Morales

58
5

IMHO line breaks can be added between logical blocks to improve readability. – Icycool Mar 02 '18 at 04:06
It doesnt works all the time, seems like random, sometimes I get 9 albums, sometimes 8, when the correct is to get 11 all the time... – Jaqueline Passos Mar 02 '18 at 12:14
@JaquelinePassos can you provide more information about the **facebookConnectPlugin** you're using? does facebookConnectPlugin.api(***) method return a promise? – Josué Morales Mar 02 '18 at 17:53
Hi @JosuéMorales, thanks. It doesnt. It returns an Object. facebookConnectPlugin.api(String requestPath, Array permissions, Function success, Function failure)´. Success function returns an Object. – Jaqueline Passos Mar 02 '18 at 22:00

How to execute all promises in angular before proceding?

1 Answers1