如何在成功处理程序之外使用$ http promise响应

Question

$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之外。它显示undefined。

如何在response

之后访问$scope.tempObject或$http

Answer 1

  

但是如果我想在回调后使用$ 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 Service API Reference -- chaining promises。

可以创建任意长度的链，并且由于可以使用另一个承诺（将进一步推迟其解析）来解决承诺，因此可以在链中的任何点暂停/推迟承诺的解析。这使得实现强大的API成为可能。 ¹

基于承诺的异步操作的解释

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 service保留，并在数据从服务器到达并且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*");

其他资源

• Angular execution order with $q

• What is the explicit promise construction antipattern and how do I avoid it?

• Why are angular $http success/error methods deprecated? Removed from v1.6?

• How is javascript asynchronous AND single threaded?

• Ninja Squad -- Traps, anti-patterns and tips about AngularJS promises
  理论很好，但需要更新才能使用.then和.catch方法。

• You're Missing the Point of Promises

Answer 2

$ http呼叫是异步呼叫。回调函数在返回响应时执行。同时，函数的其余部分继续执行并将$ scope.tempObject记录为{}。 解析$ http后，只设置$ scope.tempObject。 Angular将使用双向绑定自动绑定更改的值。

{{tempObject}}在视图中会自行更新。

如果要在回调后使用tempObject，请执行此操作

then(function(data){
   onSuccess(data);
},function(){

});

function onSuccess(data){
// do something
}

Answer 3

尝试使用$ scope。$ apply之前完成successCallback函数。另一个解决方案是更改successCallback - ＆gt;功能如此：

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