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

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 的回复，但是 在$http 之外没有得到$scope.tempObject。它显示undefined。

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

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。

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

---

解释基于 Promise 的异步操作

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

“第 4 部分”的控制台日志不必等待数据从服务器返回。它在 XHR 启动 后立即执行。 “第 3 部分”的控制台日志位于成功处理函数中，该函数由 $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

在完成successCallback函数之前尝试使用$scope.$apply。另一种解决方案是更改 successCallback -> 函数：

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