包含内部操作的AngularJS中的同时异步请求

时间:2014-08-01 10:17:02

标签: javascript angularjs asynchronous xmlhttprequest simultaneous

如何在AngularJS中创建 2个同步异步请求,其中一个操作必须在第一个请求之后完成?

我想做这样的事情:

  • 调用第一个Web服务(接收x)
  • 调用第二个Web服务(接收y)
  • 在收到第一个网络服务(f(x))
  • 的回复后执行某些操作
  • 在我有两个数据(g(x,y))
  • 后做一些事情

以下方法:

 $q.all({
    x: $http.get('http://resourceX'),
    y: $http.get('http://resourceY')
}).then(function(results) {
    $scope.a = f(results.x.data);   // where to place this line ?
    $scope.z = g(results.x.data, results.y.data);
});

不是效率,因为即使收到resourceX,它也在等待resourceY。

我想在x可用时调用函数f,并在x和y可用时调用函数g。

我想要的伪代码如下:

$q.all({
    x: $http.get('http://resourceX'),
    y: $http.get('http://resourceY')
}).when(x is ready) {
    $scope.a = f(results.x.data);
}).then(function(results) {     
    $scope.z = g(results.x.data, results.y.data);
});

所以,我想在 $ q.all方法

之间进行性能组合
$http.get('http://resourceX').success(function(x) { 
    $scope.a = f(x);
    $http.get('http://resourceY').succes(function(y){
        $scope.z = g(x, y);     
    });
});

2 个答案:

答案 0 :(得分:6)

您可以这样分开来电:

var promiseX = $http.get('http://resourceX');
var promiseY = $http.get('http://resourceY');

promiseX.then(function(result {
    $scope.a = f(result.data);
});

$q.all({
    x: promiseX,
    y: promiseY
}).then(function(results) {
    $scope.z = g(results.x.data, results.y.data);
});

答案 1 :(得分:1)

这是一个plnkr,可以完成您所需要的http://plnkr.co/edit/6WER28?p=preview

function getX() {
    var deferred = $q.defer();
    setTimeout(function() {
      deferred.resolve('X');
    }, 300)

    return deferred.promise;
  }

  function getY() {
    var deferred = $q.defer();
    setTimeout(function() {

      deferred.resolve('Y');
    }, 500);

    return deferred.promise;
  }

  var promiseX = getX();
  var promiseY = getY();

  promiseX.then(function(val) {
    console.log('recevied first one :' + val);
  })

  $q.all([promiseX, promiseY]).then(function(valuesFromBothInArray) {
    console.log('received both ' + valuesFromBothInArray);
  })