Anteriormente en el Manual de Polymer hemos introducido el Ajax con Polymer usando esta librería basada en web components. Los ejemplos que vimos servirán para muchos de los casos de uso, la mayoría, pero lo cierto es que hay bastante más por detrás de este componente que pretendemos explicar ahora.

Básicamente ahora quiero introducir otro elemento del catálogo de componentes de Polymer, que servirá para usos más avanzados de Ajax, llamado iron-request.

Aunque muchas veces usamos Ajax para recibir un valor, ya sea un objeto simple o un array de objetos como vimos en el anterior artículo, también es habitual que implementemos otro tipo de métodos en la solicitud como podría ser un POST, UPDATE, DELETE. Estos métodos no los usamos para recibir un dato, sino para insertar, actualizar o borrar y no nos importará tanto el objeto recibido como respuesta de la solicitud, sino quizás los códigos de respuesta del servidor derivados del protocolo HTTP, como 400, 401, 200, 201, o los que nuestro servicio web implemente.

A través de esos códigos de respuesta podremos saber si una actualización fue realizada con éxito, si hubo algún tipo de problema, etc. De ese modo podremos informar correctamente al usuario del resultado de su operación. La operativa para traerse esos códigos difiere del uso del iron-ajax que hemos visto antes e involucra un nuevo componente que es el objetivo de estudio de este artículo: iron-request.

Componente iron-request

Este componente del catálogo de los elementos de Polymer baja a un nivel inferior que el iron-ajax, permitiendo ver otros datos sobre la solicitud recibida, que no te expone directamente el componente de más alto nivel iron-ajax.

Realmente, aunque podrías usarlo a él, sin necesidad de implementar iron-ajax, para hacer una solicitud, no es algo habitual. Sueles trabajar con iron-ajax o iron-form y, cuando tienes que examinar más a fondo la respuesta de la solicitud usarás iron-request. Realmente, como veremos a continuación, la operativa es bastante sencilla y el elemento iron-request aparecerá en tu vida de manera natural: Polymer te lo proporcionará automáticamente y nosotros lo usaremos para recibir datos que necesitemos de la solicitud.

Básicamente, Polymer te entrega el componente iron-request como parámetro al implementar un evento del componente iron-ajax o iron-form llamado "response". Es decir, dentro de un iron-ajax o iron-form podemos detectar eventos "response" y al escribir sus manejadores de eventos recibiremos como parámetro el propio evento y el componente iron-request.

respuestaRecibida: function(e, request) {
  console.log(request);
}

Ejemplo de uso de iron-request

Este componente se entenderá mejor con un vistazo a un ejemplo más complejo de solicitud Ajax. En este ejemplo enviaremos datos por POST a un servicio web, que lo que hace es recibirlos e insertarlos en un recurso de un API REST, devolviendo un código de HTTP y un cuerpo con el dato recién insertado.

Nuestro componente iron-ajax ahora tendrá una serie mayor de propiedades. Muchas de ellas ya las conoces porque las vimos en el anterior artículo sobre iron-ajax.

<iron-ajax
  id="elajax"
  url="http://jsonplaceholder.typicode.com/posts"
  handle-as="json"
  loading="{{cargando}}"
  method="POST"
  content-type="application/json"
  on-response="respuestaRecibida"
></iron-ajax>

Los atributos nuevos que estamos usando son los siguientes:

• method: indica el método de la solicitud (POST, GET, PUT…).
• content-type: permite indicar el tipo de información que estamos incluyendo en el cuerpo de la solicitud. En este caso enviaremos en el cuerpo un JSON del dato que deseamos insertar.
• on-response: esta es la declaración de un manejador de eventos que vamos a ejecutar cuando se reciba la respuesta del servidor.
• body: este atributo no lo estamos usando en el anterior código, pero la propiedad en si la vamos a usar en nuestro ejemplo. En ella indicamos el cuerpo de la solicidut HTTP, que se usa por ejemplo en el caso de enviar por post un dato al servidor. Ese dato lo vamos a cargar de manera imperativa, desde Javascript, más tarde en este ejemplo.

Tendremos por otra parte un elemento en la página, que si lo pulsamos llamará al método que ejecutará la solicitud Ajax.

<div on-tap="guardar">
  Guardar post!
</div>

Nuestro método guardar será encargado de ejecutarse al hacer tap sobre el elemento DIV anterior. Aquí realizamos un uso del componente iron-ajax, en el que se cargará un dato en el cuerpo de la solicitud HTTP, usando la propiedad "body" que hemos comentado antes. Además luego lanzamos la solicitud con el método generateRequest() del componente iron-ajax.

guardar: function() {
  var obj = {
    title: 'Título de un post',
    body: 'Este es el cuerpo de un post',
    userId: 1
  };
  this.$.elajax.body = obj;
  this.$.elajax.generateRequest();
},

Esa solicitud se ejecutará entonces, gracias al comportamiento del iron-ajax. Finalmente, cuando el servidor devuelva el resultado de la solicitud, se producirá el evento "response" del iron-ajax, para el cual se definió un manejador declarado en la etiqueta iron-ajax. Allí es donde, por fin, podremos usar el componente iron-request.

respuestaRecibida: function(e, request) {
  //el parámetro "request" es el iron-request de esta solicitud
  console.log(request.response)
}

Algunas propiedades útiles de iron-request

Por medio de las propiedades de iron-request podemos observar con mucho detalle el estado de nuestra solicitud. Algunas de sus propiedades más útiles son:

• response: con el cuerpo de la respuesta. Algo normal es que se nos devuelva un JSON, entonces recibiríamos el objeto Javascript una vez parseado el JSON.
• status: el número del status de la solicitud HTTP: 200, 404, 201... esos códigos de respuesta dependen del API que estemos usando, aunque seguramente sepas que existen unos que son más estándar como 200 cuando la solicitud tuvo éxito, 201 cuando una inserción tuvo éxito, 404 cuando el recurso no fue encontrado...
• succeeded: es un boleano que indica si la solicitud tuvo éxito (si el status es 200, mayor que 200 y menor que 300. O bien cero como status).
• errored: el contrario de succeeded.
• timedOut: Un boleano que indica si la solicitud terminó por un "time out".

Con todos esos datos, y otros, será muy fácil interpretar la solicitud y mostrar la información correcta al usuario. Recuerda que puedes encontrar otras propiedades y métodos en la documentación del componente iron-request.

Este sería un ejemplo sencillo de manejador de evento donde recibimos el iron-request.

respuestaRecibida: function(e, request) {
  if(request.succeeded) {
    this.mensaje = 'la solicitud se resolvió correctamente con código ' + request.status
  } else {
    this.mensaje = 'la solicitud nos ofreció resultados incorrectos, con código ' + request.status
  }
},

Errores en la solicitud Ajax

Es muy sencillo ejecutar acciones cuando se produzca un error en la solicitud Ajax, por ejemplo ante un código 404. Tendremos que hacerlo a través de un evento distinto, porque el usado hasta ahora "response" no se ejecutará cuando se produzca un error.

Para ejecutar acciones como respuesta a un error en la solicitud primero tenemos que definir el manejador de eventos correspondiente.

<iron-ajax
  id="elajax"
  on-error="errorRecibido"
></iron-ajax>

Luego tendremos que implementar el manejador de eventos "errorRecibido". Como todo manejador de eventos en Polymer recibimos el objeto evento como primer parámetro. En el segundo parámetro recibimos en este caso un objeto "error". Ese objeto "error" tiene varios datos, como un mensaje de error y la propia solicitud, implementada de nuevo por medio de un componente iron-request.

errorRecibido: function(e, error) {
    console.log(error.request); //ese es el iron-request de la solicitud
    this.mensaje = 'Error en la solicitud, con código ' + error.request.status;
}

Conclusión y ejemplo completo del componente iron-request

En este artículo hemos conocido un componente asociado a las conexiones Ajax llamado iron-request. Es un componente que inicialmente no lo necesitas para hacer una conexión Ajax sencilla, pero que te servirá de mucha utilidad para poder examinar las solicitudes de manera muy detallada en los eventos asociados tanto a elementos iron-ajax como a elementos iron-form.

Como has podido comprobar, los iron-request son especialmente útiles cuando estás comunicando con un servicio web, implementado por medio de API REST y necesites saber los estatus de respuesta para ver cómo debes notificar al usuario el resultado de las operaciones solicitadas en el servicio web.

Para acabar, te mostramos el código de un componente completo en el que puedes ver integradas todas las funcionalidades explicadas en este artículo.

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">

<dom-module id="ajax-avanzado">
  <template>
   <style>
      div{
        border-radius: 6px;
        padding: 10px;
        background-color: #ddd;
        width: 120px;
        text-align: center;
      }
    </style>
<iron-ajax
  id="elajax"
  url="http://jsonplaceholder.typicode.com/posts"
  handle-as="json"
  loading="{{cargando}}"
  method="POST"
  content-type="application/json"
  on-response="respuestaRecibida"
  on-error="errorRecibido"
></iron-ajax>
    <paper-spinner alt="Cargando el usuario..." active="[[cargando]]"></paper-spinner>

    <div on-tap="guardar">
      Guardar post!
    </div>

    <p>
      [[mensaje]]
    </p>

  </template>
  <script>
    Polymer({
      is: "ajax-avanzado",

      properties: {
        cargando: Boolean,
      },

      guardar: function() {
        var obj = {
          title: 'Título de un post',
          body: 'Este es el cuerpo de un post',
          userId: 1
        };
        this.$.elajax.body = obj;
        this.$.elajax.generateRequest();
      },

      respuestaRecibida: function(e, request) {
        if(request.succeeded) {
          this.mensaje = 'la solicitud se resolvió correctamente con código ' + request.status
        } else {
          this.mensaje = 'la solicitud nos ofreció resultados incorrectos, con código ' + request.status
        }
      },

      errorRecibido: function(e, error) {
        console.log(error.request.status);
        this.mensaje = 'Error en la solicitud, con código ' + error.request.status;
      }
    });
  </script>
</dom-module>