Envío de solicitudes AJAX en Vue.js

¿Qué es AJAX?

Javascript y XML asincrónicos (AJAX), es una forma de comunicarse con un servidor web desde una aplicación del lado del cliente a través del protocolo HTTP o HTTPS.

Aunque AJAX contiene XML en el nombre, la forma en que los datos se envían a través de solicitudes o se reciben no tiene que ser XML, sino también texto sin formato, o en la mayoría de los casos JSON, debido a que es más ligero y forma parte de JavaScript en y de sí mismo.

¿Por qué es útil AJAX?

Vue.js se utiliza como un marco de interfaz de usuario, y si alguna vez desea comunicarse con un servidor, recuperar o almacenar información en una base de datos o realizar algunos cálculos en sus datos, lo más probable es que necesite AJAX.

Aunque AJAX se puede utilizar creando un XMLHttpRequest objeto, que estará disponible a través del navegador. Hay ciertos paquetes que pueden ayudarnos a comunicarnos con nuestro servidor.

Vue.js tiene un paquete oficial que se llama vue-resource que funciona como un cliente HTTP, pero la documentación oficial sugiere usar Axios.

Instalación de Axios y configuración de un componente

Axios es un cliente HTTP y se puede instalar en nuestro package.json dependencias a través de su administrador de paquetes de elección, ya sea NPM o Hilo:

$ npm install axios
OR
$ yarn add axios

Después de la instalación, podemos configurar un componente de prueba minimalista con fines de demostración:

// Test.vue
<template>
  <div/>
</template>

<script>
export default {
  data() {
    return {};
  };
}
</script>

Uso de Axios en componentes de Vue

Las solicitudes a un servidor a través de HTTP toman una cierta cantidad de tiempo para regresar con una respuesta y, para asegurarse de que la información que se muestra al usuario sea correcta, promesas tendrá que usarse para asegurarse de que los datos hayan regresado antes de continuar con la ejecución de nuestro código.

Para usarlo en un componente, simplemente importamos el paquete y lo asignamos a una variable:

// Test.vue
<script>
import axios from "axios";

export default {
  data() {
    return {};
  }
};
</script>

Generalmente, las llamadas a la API se realizan dentro del montado Gancho del ciclo de vida de Vue.

Vamos a utilizar un servicio de datos JSON simulado llamado JSONPlaceholder. Esta es una simulación de cómo se verá un punto final de back-end cuando se golpea un API REST:

// Test.vue
<script>
import axios from "axios";

export default {
  data() {
    return {};
  },
  mounted() {
    axios.get("https://jsonplaceholder.typicode.com/todos/")
  }
};
</script>

En el ejemplo de código anterior, el componente se representa antes de que llegue la información de JSONPlaceholder. Por lo tanto, el uso de promesas asegurará que podamos manejar los datos y agregarlos a nuestra vista.

Manejo de respuestas con then ()

los then() función, nos permite manipular nuestra promesa y decirle a nuestro código qué vamos a hacer si / cuando la solicitud fue exitosa. Podemos, por ejemplo, con una función de devolución de llamada, verificar nuestra respuesta en la consola:

mounted() {
  axios.get("https://jsonplaceholder.typicode.com/todos/")
    .then(response => console.log(response))
}

Se ha devuelto una respuesta y podemos verla dentro de la consola del navegador, pero, ¿cómo le mostramos al usuario la lista de tareas?

Deberíamos mantener la lista de todos dentro del datos objeto para futuras referencias dentro del DOM.

Lo llamaremos todosList, y copiaremos la propiedad de datos del objeto de respuesta de forma inmutable (para que no cambiemos el objeto de respuesta real) utilizando Javascript untado operador y solo muestre los primeros 10 elementos, usando el rebanada función array, para que no carguemos cientos de todos:

<script>
import axios from "axios";

export default {
  data() {
    return {
      todosList: []
    };
  },
  mounted() {
    axios.get("https://jsonplaceholder.typicode.com/todos/")
      .then(response => {
         this.todosList = [...response.data].slice(0, 10)
      })
  }
};
</script>

Manejo de errores con catch ()

¿Qué sucede si falla la solicitud? El estado de la aplicación deberá gestionarse en consecuencia. Para eso tenemos el catch() función, que se puede anidar en nuestra pila de funciones:

mounted() {
  axios.get("https://jsonplaceholder.typicode.com/todos/")
    .then(response => console.log(response))
    .catch(err => {
       // Manage the state of the application if the request 
       // has failed      
     })
}

De esta manera, vemos que se solicita el error y podemos hacer muchas cosas con él, como mostrar un mensaje de error al usuario como una alerta o mostrar una tarjeta que diga «No Todos Disponibles». Las posibilidades son infinitas.

Mostrando los Todos

Utilizando la v-for La directiva Vue podemos inyectar nuestros todos dentro de la plantilla y agregar algo de estilo con fines visuales:

<template>
  <div>
    <ul 
      class="test-list" 
      v-for="todo in todosList" 
      :key="todo.id"
    >
      <li class="test-list--item">
        {{ todo.id }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      todosList: []
    };
  },
  mounted() {
    axios.get("https://jsonplaceholder.typicode.com/todos/")
      .then(response => {
         this.todosList = [...response.data].slice(0, 10)
      })
      .catch(err => {
         // Manage the state of the application if the request 
         // has failed      
      })
  }
};
</script>

<style>
.test-list {
  font-family: Roboto;
  list-style: none;
  margin: 20px auto;
  width: 50%;
}

.test-list--item {
  border: 1px solid rgb(41, 41, 41);
  border-radius: 5px;
  text-align: center;
  display: block;
  box-shadow: 2px 2px rgba(138, 124, 124, 0.4);
}

.test-list--id {
  font-weight: 300;
  margin: 10px auto;
}

.test-list--title {
  font-weight: 500;
  margin: 20px auto;
  text-transform: capitalize;
}

.test-list--complete {
  font-weight: 600;
  margin: 10px auto;
  color: #56ca86;
}

.test-list--incomplete {
  font-weight: 600;
  margin: 10px auto;
  color: #ca5656;
}
</style>

Si revisamos nuestro navegador, veremos algo como esto:

¡Felicitaciones, acabamos de enviar una solicitud HTTP a una API y mostramos los datos al usuario!

Async / Await vs Promises

Async / Await es una construcción de lenguaje relativamente nueva de JavaScript que hace que nuestro código asincrónico sea mucho más limpio.

Aunque las llamadas Async / Await se convertirán en promesas al final, transmite un enfoque diferente ya que ya no necesitamos configurar funciones de devolución de llamada para nuestro código, ¡todos sabemos cuánto las odiamos!

Nuestro código de ejemplo, usando Async / Await, se vería como lo siguiente, mientras agrega algo de magia de desestructuración de objetos para que nuestro código se vea aún mejor:

// Test.vue
async mounted() {
    const url="https://jsonplaceholder.typicode.com/todos/"
    const { data } = await axios.get(url)
    this.todosList = [...data].slice(0, 10)
}

El gancho del ciclo de vida montado tiene el prefijo async palabra clave. Esto asegura que el gancho devuelva una promesa.

Dentro del gancho, el await La palabra clave hace que la función llamada con ella espere a que continúe su resolución.

Conclusión

AJAX es una parte clave del desarrollo web moderno y, aunque puede parecer abrumador al principio, tenerlo en tu arsenal es imprescindible.

La propia naturaleza de Vue.js te hace pensar en tu código de forma asincrónica para que puedas actualizar tus componentes correctamente, brindando así a tus usuarios una experiencia increíble.

Para obtener más información sobre el código asincrónico para Vue, puede consultar el Libro de cocina de Vue.js.