如何在成功处理程序外使用$ 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");
“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) { });