Question

我是AngularJS的新手。在我的项目中，我将按时调用多$ http请求。但是，在$ http请求之前成功的数据是下一个$ http请求中的参数。

我试过这个：

$http.post(URL1, params1).success(function(data){
     $http.post(URL2, data.result).success(function(){
          ......
     })
}).error(function(err){})

但这使得它变得复杂和难以处理。如何重新安排？感谢。

Answer 1

控制异步操作async module非常简单，或者你可以使用vasync，就像异步但更好的记录。

var postSomething1 = function(cb) {
    $http.post(URL1, params1).success(function(data){
        cb(null, data);
    })
    .error(cb);
};
var putSomething = function(cb) {
    $http.put(URL1, params1).success(function(data){
        cb(null, data);
    })
    .error(cb);
};

var tasks = [
    postSomething,
    putSomething
];
var done = function(err, result){
    console.log("Complete with err", err, " result", result);
};

async.parallel(tasks, done);

因为你有更多的方法，你意识到你可以像这样重构：

var call = function(method, url, params) {
    return function(cb) {
        var method = method.toLowerCase();
        $http[method](url, params).success(function(data){
            cb(null, data);
        })
        .error(cb);
    };
};
var tasks = [
    call('POST', 'http://example.com/create/event', { event_name: 'Cool' }),
    call('PUT', 'http://example.com/update', { name: 'Jon' }),
    call('PUT', 'http://example.com/event/enable', { enable: true }),
    call('GET', 'http://example.com/list/34')
    ...
];
var done = function(err, result){
    console.log("Complete with err", err, " result", result);
};

async.parallel(tasks, done);

Answer 2

这是一个你可以这样做的例子

var FlightDashboard = function( $scope, user, travelService, weatherService )
    {
        // Level 1
#
        travelService
            .getDeparture( user.email )                 // Request #1
            .then( function( departure )                // Response Handler #1
            {
                $scope.departure = departure;
#
                // Level 2
#
                travelService
                    .getFlight( departure.flightID )        // Request #2
                    .then( function( flight  )              // Response Handler #2
                    {
                        $scope.flight = flight;
#
                        // Level 3
#
                        weatherService
                            .getForecast( departure.date )      // Request #3
                            .then( function( weather )          // Response Handler #3
                            {
                                $scope.weather = weather;
                            });
                    });
            });
    };

使用AngularJS中的嵌套数据调用多个$ http请求

2 个答案: