JavaScript 方法链或 Angular $q答案

【问题标题】：JavaScript Method Chaining or Angular $qJavaScript 方法链或 Angular $q
【发布时间】：2016-12-13 06:59:00
【问题描述】：

我对 JavaScript 比较陌生，希望您能耐心等待。

我正在尝试链接我的方法调用以异步运行，但有点卡住了。

我做了很多搜索并尝试了各种方法，但我错过了一些东西。

这个想法是一个接一个地调用一个方法，但只有在第一个方法解决后。

我正在使用AngularJs，我不确定是使用$q 和$defer，还是简单的方法链接，或者完全不同的东西......

我见过下面的链接方法：

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

还有这个使用$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;
            })
        ;
    };
});

以下是我的主要功能，哪种方法最适合我的目的，我将如何实施最佳解决方案？

注意：在我的controller 的这个阶段，我的数据已经从我的API 调用中返回，我只是使用这些数据来填充图表和数据网格：

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);
        }
    })
}

我知道我的要求很多，非常感谢您的帮助。

研究和资源：

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

Chain promises with AngularJS

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

【问题讨论】：

Angular 中的 Promise 不需要使用 $q，$http 本身会返回一个 Promise，因此您可以将 $http.then() 链接起来，其中每个将在前一个解决后调用。
感谢您的回复。我是否需要链接我的主函数（数据已经从我的服务返回），还是我只是按照我的代码一个接一个地调用一个函数？
为了链接函数调用，所有这些函数都应该创建为 promise（$q 示例），然后像第一个示例一样调用它。实际上为什么你需要实现这个？我没有看到创建承诺函数并一个接一个地调用的意义。
是的。你的代码很好。由于没有延迟执行的 i/o 调用，您不必对它们做出承诺并链接请求。
是的，因为您在 $http 成功返回中调用了所有这些函数。（即在“then”内）所以没有问题。

标签： javascript angularjs angular-promise method-chaining

【解决方案1】：

根据 Paulson Peter 和 suzo 的出色反馈和 cmets，以下是我问题的答案：

由于我的主要函数 (formatDataAccordingToLocation) 在我返回的成功 $http 调用中，因此我无需将这些方法调用与 promise 链接起来，这样做会延迟我的执行。强>

【讨论】：