JavaScript Method Chaining or Angular $q

Question

I am relatively new to JavaScript, and would appreciate your patience.

I am trying to chain my method calls to run asynchronously, but am a bit stuck.

I have done a lot of searching and tried various methods, but I am missing something.

The idea is to call one method after the other, but only once the first method has resolved.

I am using AngularJs, and I am not sure whether to use $q and $defer, or simple method chaining, or something completely different...

I have seen the below method of chaining:

callFirst()
.then(function(firstResult){
   return callSecond();
})
.then(function(secondResult){
   return callThird();
})
.then(function(thirdResult){
   //Finally do something with promise, or even return this
});

And this example of using $q:

app.service("githubService", function ($http, $q) {

    var deferred = $q.defer();

    this.getAccount = function () {
        return $http.get('https://api.github.com/users/haroldrv')
            .then(function (response) {
                // promise is fulfilled
                deferred.resolve(response.data);
                // promise is returned
                return deferred.promise;
            }, function (response) {
                // the following line rejects the promise 
                deferred.reject(response);
                // promise is returned
                return deferred.promise;
            })
        ;
    };
});

Below is my main function, and which method would be best for my purposes, and how would I implement the best solution?

NOTE: At this stage in my controller, my data has already been returned from my API call, and I am simply using the data to populate graphs and data grids:

function formatDataAccordingToLocation(dataFromAPI) {

    $scope.dataModel = DataModelService.dataLoaded();

    dataFromAPI.then(function (data) {

        $scope.totalItems = data.total_tweet_count;

        if ($scope.volumeChartChanged) {

            $scope.volumeChartChange = false;

            configureVolumeChart(data);

        }

        else {
            setSummaryPageData(data);

            setTweetListPageData(data);

            configureVolumeChart(data);

            configureMostMentionedGraph(data);

            configureFollowerGrowthGraph(data);

            configureEngagementsGraph(data);

            configureHashtagsGraph(data);

            configureTweetsVsReTweetsGraph(data);

            configureWordCloudGraph(data);
        }
    })
}

I know I am asking a lot, and would be very grateful for your help.

Research and resources:

https://docs.angularjs.org/api/ng/service/$q

Chain promises with AngularJS

https://schier.co/blog/2013/11/14/method-chaining-in-javascript.html

You need not use $q for promises in Angular, $http itself returns a promise, so you can chain `$http.then()` where each of them will be called after the previous one is resolved. — Supradeep, Dec 13 '16 at 07:21
Thank you for your response. Do I need to chain my main function at all (data was already returned from my service), or do I simply call one function after the other as per my code? — onmyway, Dec 13 '16 at 07:24
Is your "dataFromApi" a promise ? or what exactly you want to do ? You want to call each of those functions one after the other ? — Supradeep, Dec 13 '16 at 07:48
The "dataFromApi", is my actual json data already returned. I want to know what would be the best method to call my functions in my main method "formatDataAccordingToLocation". One after another, or chain them, or something else? — onmyway, Dec 13 '16 at 07:53
In order to chain function calls, all those functions should be created as promise ($q example), then call it as in your first example. Actually why you need to implement this? I dont see a point of creating promise functions and call one after another. — Paulson Peter, Dec 13 '16 at 08:14
I.e., would it be OK and acceptable to keep my `formatDataAccordingToLocation` method as it is and call the functions synchronously, as i am not waiting for an API call to return data? — onmyway, Dec 13 '16 at 08:37
Yes. your code is fine. You don't have to make them promises and chain the requests as there are no i/o calls that delays the execution. — Supradeep, Dec 13 '16 at 08:42
Yes, because you are calling all those functions inside $http success return. (ie inside "then") so there is no problem. — Paulson Peter, Dec 13 '16 at 08:42
Thank you all - much appreciated. Always great to learn from you guys. — onmyway, Dec 13 '16 at 08:48

score 0 · Accepted Answer · answered Dec 13 '16 at 08:56

As per the great feedback and comments from Paulson Peter and suzo, the following would be the answer to my question:

As my main function (formatDataAccordingToLocation)is inside my returned successful $http call, there is no need for me to chain these method calls with promises, and in doing so, delaying my execution.

JavaScript Method Chaining or Angular $q

1 Answers1