如何在成功处理程序外使用$ http promise response

$scope.tempObject = {}; $http({ method: 'GET', url: '/myRestUrl' }).then(function successCallback(response) { $scope.tempObject = response console.log("Temp Object in successCallback ", $scope.tempObject); }, function errorCallback(response) { }); console.log("Temp Object outside $http ", $scope.tempObject); 

我在successCallback得到响应,但没有获得$scope.tempObject外的$http $scope.tempObject 。 其显示undefined

如何在$http之后访问response$scope.tempObject

但是如果我想在callback后使用$ scope.tempObject,那么我怎样才能使用它。 ?

你需要链接 httpPromise。 保存httpPromise并将值返回给onFullfilled处理函数。

 //save httpPromise for chaining var httpPromise = $http({ method: 'GET', url: '/myRestUrl' }).then(function onFulfilledHandler(response) { $scope.tempObject = response console.log("Temp Object in successCallback ", $scope.tempObject); //return object for chaining return $scope.tempObject; }); 

然后在你之外链接 httpPromise。

 httpPromise.then (function (tempObject) { console.log("Temp Object outside $http ", tempObject); }); 

有关更多信息,请参阅AngularJS $ q服务API参考 – 链接承诺 。

有可能创build任意长度的链,并且由于承诺可以用另一个承诺来解决(这将进一步延迟其解决scheme),所以可以在链中的任何时刻暂停/延迟承诺的解决。 这使得实现强大的API成为可能。 1


基于承诺的asynchronous操作的解释

 console.log("Part1"); console.log("Part2"); var promise = $http.get(url); promise.then(function successHandler(response){ console.log("Part3"); }); console.log("Part4"); 

PIC

“Part4”的控制台日志不必等待数据从服务器返回。 它在XHR 启动后立即执行。 “Part3”的控制台日志位于由$ q服务持有的成功处理函数中,并数据从服务器到达并且XHR 完成 之后调用。

演示

 console.log("Part 1"); console.log("Part 2"); var promise = new Promise(r=>r()); promise.then(function() { console.log("Part 3"); }); console.log("Part *4*"); 

$ http调用是asynchronous调用。 callback函数在返回响应时执行。 同时该函数的其余部分继续执行,并将$ scope.tempObjectlogging为{}。 当parsing$ http时,只设置$ scope.tempObject。 Angular将使用双向绑定自动绑定已更改的值。

视图中的{{tempObject}}将自行更新。

如果你想在callback之后使用tempObject,那就这样做

 then(function(data){ onSuccess(data); },function(){ }); function onSuccess(data){ // do something } 

尝试使用$ scope。$ apply before来完成successCallback函数。 另一个解决scheme是改变successCallback – >函数,所以:

 $http({ method: 'GET', url: '/myRestUrl' }).then(function(success) { $scope.tempObject = success; console.log("Temp Object in successCallback ", $scope.tempObject); }, function(error) { });