> Manuales > Manual de AngularJS

Explicaciones sobre el nuevo estándar promise para llamadas Ajax en Angular 1.4, usando el método then().

En el Manual de AngularJS hemos explicado Ajax en diversos artículos, sin embargo unos cambios en las últimas versiones de este framework Javascript nos obligan a hacer algunas actualizaciones relacionadas con el estándar promise.

Cuando realizamos una conexión por Ajax siempre tardará un poco en recibirse la respuesta. Gracias al comportamiento asíncrono de Javascript, no bloqueante ante situaciones de espera, se tiene que usar el patrón promise para indicar las acciones a realizar cuando se produce esa respuesta del servidor.

En los artículos anteriores dedicados a Ajax se mostró el funcionamiento del sistema de promesas a través de los métodos success() y error(). Éstos ahora están obsoletos, por lo que debemos empezar a acostumbrarnos a usar el nuevo estándar con el método then().

Nota: a pesar que los métodos success() y error() están obsoletos (deprecated) siguen funcionando, para asegurar que no da errores el código creado para versiones anteriores de AngularJS. Son considerados como "legacy methods" y no conviene usarlos porque en un futuro se dejará de dar soporte.

Cómo obtener el objeto promise

Por refrescar la memoria, vamos a ver el código de una llamada Ajax, usando el service $http con el método shortcut $http.get(). Éste método nos devolverá el mencionado objeto "promesa".

var promesa  = $http.get("https://restcountries.eu/rest/v1/all");

Aunque en seguida veremos que generalmente el objeto no es necesario guardarlo en una variable, sino encadenar directamente la configuración del "promise".

Método then()

Sobre el objeto promesa podemos invocar el método then(). Éste nos permite definir dos funciones con las cuales podremos indicar las acciones a realizar, tanto para el caso de suceso en la solicitud como para el caso de error.

Lo común sería utilizar un sistema de encadenamiento de métodos, que nos permita recibir el objeto promesa y a continuación invocar su método then() para realizar las acciones oportunas cuando se reciba la respuesta del servidor.

$http.get("http://example.com/url/ajax")
.then(function(res){
    // acciones a realizar cuando se recibe respuesta con éxito
}, function(res){
    // acciones a realizar cuando se recibe una respuesta de error
});

Cómo has podido apreciar, el método then() recibe dos parámetros que configuramos con dos funciones anónimas. La primera de las funciones sirve para indicar las acciones que quieres realizar cuando recibes del servidor una respuesta con éxito, es decir, una respuesta con un estatus del protocolo HTTP que considere como "todo correcto", status 200 por ejemplo. La segunda de las funciones sirve para indicar las acciones que se quiere realizar al recibir una respuesta de error, con un estatus tal qué 404, de página no encontrada, o 500, de error de ejecución del servidor, etc.

Parámetro respuesta en las funciones anónimas

Como novedad, las funciones anónimas que asignamos al método then(), reciben un objeto respuesta.

.then(function(res){

Este objeto tiene una serie de atributos con los datos de la respuesta que hemos recibido del servidor. Por ejemplo podremos encontrar el atributo "data", que nos devolvería el objeto nativo de Javascript creado a partir del JSON que se recibe en el cuerpo del response. También podremos encontrar por ejemplo un atributo "status" con el valor exacto del status de respuesta, 200, 404 o el que sea.

Para observar ese nuevo objeto respuesta te recomiendo hacer un console.log() y así podrás apreciar todos los atributos que nos entrega Angular para indicarnos exactamente cómo ha ido la solicitud Ajax. No obstante ahora vamos a poner un pequeño ejemplo donde podrás ver cómo podremos utilizar este objeto de respuesta para producir una salida adecuada es una solicitud Ajax con angularjs.

Ejemplo completo Ajax en AngularJS 1.4

Comencemos primero mostrando el código HTML de nuestro ejemplo. Nos estamos conectado con un API pública llamada REST Countries, que nos facilita información diversa sobre países del mundo.

Esta página mostrará en una lista todos los países que nos devuelva este API. Además se mostrará al lado la capital del país. El propio código HTML tienes enlaces a REST Countries, por si quieres echarle un vistazo a esta API muy interesante para realizar ejemplos Ajax con angular sin tener que preocuparte por la autenticación.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax con un API REST</title>
    <link rel="stylesheet" href="../estilo-basico.css">
</head>
<body ng-app="paisesApp" ng-controller="PaisesAppController">
    <h1>Países del mundo</h1>
    <p>
        Vamos a usar el servicio web llamado "Rest Countries". 
        <a href="https://restcountries.eu/">https://restcountries.eu/</a>
    </p>
    <p>
        La URL <a href="https://restcountries.eu/rest/v1/all">https://restcountries.eu/rest/v1/all</a> devuelve todos los países del mundo.
    </p>
    <div ng-show="paises.length == 0">Cargando paises...</div>
    <h2 ng-show="paises.length">Se encontraron {{paises.length}} en el mundo</h2>
    <ol>
        <li ng-repeat="pais in paises">{{pais.name}} - {{pais.capital}}</li>
    </ol>
    
    <script src="../angular.min.js"></script>
    <script src="paisesApp.js"></script>
</body>
</html>

Ahora vamos a mostrar el código JavaScript de nuestro "Module". Apreciarás que tienes un controlador que es donde realizamos la solicitud Ajax para poblar array de países con el que realizar el listado en la página.

angular
  .module("paisesApp", [])
  .controller("PaisesAppController", ["$scope", "$http", function($scope, $http){
      $scope.paises = [];
      $http.get("https://restcountries.eu/rest/v1/all")
        .then(function(res){
          $scope.paises = res.data;
        }, function(res){
          $scope.paises = [{name: "Error!! " + res.status}];
        });
  }]);

Fíjate en la primera función anónima que enviamos al método then(), cómo hacemos uso del atributo data de la respuesta para asignarlo al array de países del scope.

La segunda función anónima indicada en caso de error utiliza la respuesta para extraer el estatus recibido (atributo status). No sería la mejor manera de mostrar un error pero nos sirve como alternativa para este pequeño ejemplo.

Conclusión

Con esto terminamos este ejercicio en el cual hemos visto el nuevo estándar de promesas para solicitudes Ajax que utilizamos en las últimas versiones de angularjs. La verdad es que no tiene ninguna dificultad por lo que entendemos que no hace falta mucha más explicación para poder empezar a usarlo y adaptarnos API de las nuevas versiones de este framework Javascript.

Miguel Angel Alvarez

Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...

Manual