How to use $http promise response outside success handler

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);

I am getting response in successCallback but not getting $scope.tempObject outside $http. its showing undefined.

How to access response or $scope.tempObject after $http

Answer 1

But if I want to use $scope.tempObject after callback so how can I use it. ?

You need to chain from the httpPromise. Save the httpPromise and return the value to the onFullfilled handler function.

//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;

});

Then outside you chain from the httpPromise.

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

For more information, see AngularJS $q Service API Reference -- chaining promises.

It is possible to create chains of any length and since a promise can be resolved with another promise (which will defer its resolution further), it is possible to pause/defer resolution of the promises at any point in the chain. This makes it possible to implement powerful APIs.¹

---

Explaination of Promise-Based Asynchronous Operations

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

The console log for "Part4" doesn't have to wait for the data to come back from the server. It executes immediately after the XHR starts. The console log for "Part3" is inside a success handler function that is held by the $q service and invoked after data has arrived from the server and the XHR completes.

Demo

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*");

---

Additional Resources

• 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
  Good theory but needs to be updated to use .then and .catch methods.

• You're Missing the Point of Promises

Answer 2

$http call is async call. The callback function executes when it has returned a response. Meanwhile the rest of the function keeps executing and logs $scope.tempObject as {}. When the $http is resolved then only $scope.tempObject is set. Angular will bind the changed value automatically using two way binding.

{{tempObject}} in the view will update itself.

if you want to use tempObject after callback then do this

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

});

function onSuccess(data){
// do something
}

Answer 3

Try to use a $scope.$apply before to finish the successCallback function. An other solution is to change successCallback -> function so:

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