Angular 承诺使用多个 http 请求

Posted 2023-03-07

【中文标题】Angular 承诺使用多个 http 请求

【英文标题】：Angular promises using multiple http requests

【发布时间】：2014-05-30 14:44:16

【问题描述】：

我之前已经阅读了一些关于 Angular Promise 的论坛帖子，但无法让它在我的实例中发挥作用。我在后端使用 nodejs /locomotive，前端使用 Angular。

我在控制器中有以下代码，基本上我想使用 slides.path 的路径，我将如何使用 Promise 来执行此操作？任何帮助将不胜感激。

function ProductCtrl($scope, $http, $q) 

    $scope.events = [];
    $scope.times = [];

    var html = [];
    var chapters = [];
    var path;

    //var paPromise = $q.defer();

    $http(
        url: '/show',
        method: 'GET',
        params:  eventid:$scope.$routeParams.eventid

    ).success(function(response, code) 

        $scope.events = response;

        angular.forEach($scope.events.slides, function(slide) 

            $http(
                url: '/upload',
                method: 'GET',
                params: uploadid: slide.upload.toString()

            ).success(function(response, code) 
                return "http://www.example.com/"+response.path;

            ,path);

            slide.path = path;

            chapters.push(slide);

        );

    );

【问题讨论】：

你是带着承诺去做的。 $http 返回一个promise，并且只有在promise 被解决时才调用success 调用。你到底有什么问题？

除非您想使用完整的 FRP 或启用旧版自动展开模式。我不确定你想要完成什么。

【参考方案1】：

您可以使用 $q.all 来完成这个多重承诺问题。像这样：

function ProductCtrl($scope, $http, $q) 

$scope.events = [];
$scope.times = [];

var html = [];

var path;

function fetchChapter() 
    var chapters = [];

    var httpPromise = $http(
        url: '/show',
        method: 'GET',
        params: 
            eventid: $scope.$routeParams.eventid
        
    );

    //Return the value http Promise
    return httpPromise.then(function (response) 
        $scope.events = response;
        var promises = [];
        angular.forEach($scope.events.slides, function (slide) 

            var inPromise = $http(
                url: '/upload',
                method: 'GET',
                params: 
                    uploadid: slide.upload.toString()
                
            ).then(function (response, code) 
                //each promise makes sure, that he pushes the data into the chapters
                slide.path = "http://www.example.com/" + response.path;
                chapters.push(slide);
            );
            //Push the promise into an array
            promises.push(inPromise);
        );
        //return the promise from the $q.all, that makes sure, that all pushed promises are ready and return the chapters.
        return $q.all(promises).then(function () 
            return chapters;
        );
    );


fetchChapter().then(function(chapters)
   //populate here 
);

httpPromise 将从 $q.all 返回承诺。

编辑：那么如何获取数据 包装一个函数，我用fetchChapter 做了一个函数并将一个函数传递给then 会有你需要的值作为参数。

【讨论】：

嗯。为什么不从承诺中返回chapter？您可以简单地将切片映射到它们上的承诺。

缺少“s” ^^ chapters.push(slide)

感谢您的回复，我将如何使用 var 章节来填充 httpromise 之外的 div

成功了，我开始理解承诺，酷，干杯