angularjs - Cómo usar la respuesta de promesa $ http fuera del controlador de éxito

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

Recibo respuesta en successCallback pero no $scope.tempObject fuera de $http . se muestra undefined .

Cómo acceder a la response o $scope.tempObject después de $http

Answer 1

Pero si quiero usar $ scope.tempObject después de la devolución de llamada, ¿cómo puedo usarlo? ?

Necesita encadenar desde httpPromise. Guarde httpPromise y devuelva el valor a la función del controlador 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;
});

Luego, fuera de la cadena de httpPromise.

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

Para obtener más información, consulte AngularJS $ q Service API Reference: encadenamiento de promesas .

Es posible crear cadenas de cualquier longitud y, dado que una promesa puede resolverse con otra promesa (lo que retrasará aún más su resolución), es posible pausar / diferir la resolución de las promesas en cualquier punto de la cadena. Esto hace posible implementar API potentes. ¹

Explicación de operaciones asincrónicas basadas en promesas

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

El registro de la consola para "Parte 4" no tiene que esperar a que los datos vuelvan del servidor. Se ejecuta inmediatamente después de que comience el XHR. El registro de la consola para "Parte3" está dentro de una función de controlador de éxito que el servicio $ q mantiene e invoca después de que los datos han llegado del servidor y el XHR se completa .

Manifestación

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

Recursos adicionales

• Orden de ejecución angular con $q

• ¿Cuál es la promesa explícita antipatrón de construcción y cómo la evito?

• ¿Por qué los métodos de éxito / error angular $ http están en desuso? Eliminado de v1.6?

• ¿Cómo es JavaScript asíncrono y de un solo subproceso?

• Ninja Squad: trampas, antipatrones y consejos sobre las promesas de AngularJS
  Buena teoría pero necesita ser actualizada para usar los métodos .then y .catch .

• Te estás perdiendo el punto de las promesas

Answer 2

$ http call es una llamada asincrónica. La función de devolución de llamada se ejecuta cuando ha devuelto una respuesta. Mientras tanto, el resto de la función sigue ejecutándose y registra $ scope.tempObject como {}. Cuando se resuelve $ http, solo se establece $ scope.tempObject. Angular enlazará el valor cambiado automáticamente usando el enlace bidireccional.

{{tempObject}} en la vista se actualizará solo.

si desea usar tempObject después de la devolución de llamada, haga esto

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

Answer 3

Intente utilizar un $ scope. $ Apply antes para finalizar la función successCallback. Otra solución es cambiar successCallback -> function así:

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