在AngularJS中使用嵌套數據調用多個$ http請求

Question

我是AngularJS中的新成員。在我的項目中，我將按時調用多個$ http請求。但是，在$ http請求之前成功的數據是下一個$ http請求中的一個參數。

我試試這個：

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

但它使複雜和難以處理。如何解決它？謝謝。

Answer 1

這是可以做到像這樣

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

Answer 2

這是非常簡單的控制異步操作​​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);