<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="//code.angularjs.org/1.2.19/i18n/angular-locale_es-es.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="PruebaController">
{{mensaje}}
<br>
{{progreso}}
<br>
<br>
{{mensajeCero}}
<br>
{{progresoCero}}
<br>
<br>
{{mensajeMultipleArray}}
<br>
{{progresoMultipleArray}}
<br>
<br>
{{mensajeMultipleObjetos}}
<br>
{{progresoMultipleObjetos}}
<br>
<br>
{{mensajeEncadenada}}
<br>
{{progresoEncadenada}}
</body>
</html>
var app = angular.module("app", []);
app.controller("PruebaController", ['$scope', '$q', '$timeout',function($scope, $q, $timeout) {
function sumaAsincrona(a, b) {
if ((a===0) && (b===0)) {
return $q.when(0);
}
var defered = $q.defer();
var promise = defered.promise;
$timeout(function() {
defered.notify(0);
}, 1);
$timeout(function() {
defered.notify(33);
}, 1000);
$timeout(function() {
defered.notify(66);
}, 2000);
$timeout(function() {
try {
var resultado = a + b;
defered.notify(100);
defered.resolve(resultado);
} catch (e) {
defered.reject(e);
}
}, 3000);
return promise;
}
//Ejemplo con notificación al final y mensajes de progreso
$scope.mensaje = "Esperando a que se resuelva la promesa"
var promise = sumaAsincrona(5,2);
promise.then(function(resultado) {
$scope.mensaje = "El resultado de la promesa es:" + resultado;
}, function(error) {
$scope.mensaje = "Se ha producido un error al obtener el dato:" + error;
}, function(progreso) {
$scope.progreso = progreso+"%";
});
promise["finally"](function() {
alert("Mensaje del ejemplo.Esto se llama justo antes de resolver o rechazar la promesa.");
});
//Ejemplo de promesa con valor inmediato
$scope.mensajeCero = "Esperando a que se resuelva la promesa con valor inmediato";
var promiseCero=sumaAsincrona(0,0);
promiseCero.then(function(resultado) {
$scope.mensajeCero = "El resultado de la promesa con valor inmediato es:" + resultado;
}, function(error) {
$scope.mensajeCero = "Se ha producido un error al obtener el dato de la promesa con valor inmediato:" + error;
}, function(progreso) {
$scope.progresoCero = progreso+"%";
});
//Ejemplo promesas en paralelo en forma de Array
$scope.mensajeMultipleArray = "Esperando a una promesa múltiple formada por muchas promesas en forma de Array";
var promesaMultipleArray=$q.all([sumaAsincrona(0,0),sumaAsincrona(1,0),sumaAsincrona(2,0)]);
promesaMultipleArray.then(function(resultado) {
$scope.mensajeMultipleArray = "El resultado de la promesa múltiple formada por muchas promesas en forma de Array es:" + resultado[0] + "," + resultado[1] + "," + resultado[2];
}, function(error) {
$scope.mensajeMultipleArray ="Se ha producido un error en alguna de las multiples promesas:"+error;
}, function(progreso) {
$scope.progresoMultipleArray = progreso+"%";
});
//Ejemplo de promesas en paralelo en forma de Objeto
$scope.mensajeMultipleObjetos = "Esperando a una promesa múltiple formada por muchas promesas en forma de Objeto";
var promesaMultipleObjetos=$q.all({
promesaA : sumaAsincrona(0,0),
promesaB : sumaAsincrona(1,0),
promesaC : sumaAsincrona(2,0)
});
promesaMultipleObjetos.then(function(resultado) {
$scope.mensajeMultipleObjetos = "El resultado de la promesa múltiple formada por muchas promesas en forma de Objeto es:" + resultado.promesaA + "," + resultado.promesaB + "," + resultado.promesaC;
}, function(error) {
$scope.mensajeMultipleObjetos ="Se ha producido un error en alguna de las multiples promesas:"+error;
}, function(progreso) {
$scope.progresoMultipleObjetos = progreso+"%";
});
//Ejemplo de promesas encadenadas.
$scope.mensajeEncadenada="Esperando el resultado de promesas encadenadas, esto tardará 12 segundos..... ";
var promesasEncadenadas=sumaAsincrona(1,1);
promesasEncadenadas.then(function(resultado) {
return sumaAsincrona(resultado,resultado);
}).then(function(resultado) {
return sumaAsincrona(resultado,resultado);
},function(error) {
return 4;
}).then(function(resultado) {
return sumaAsincrona(resultado,resultado);
}).then(function(resultado) {
$scope.mensajeEncadenada="El resultado de las promesas encadenadas es:" + resultado;
},function(error) {
$scope.mensajeEncadenada="Se ha producido un error en alguna de las promesas:"+error;
},function(progreso) {
$scope.progresoEncadenada=progreso+"%";
});
}]);
Ejemplos de promesas avanzadas