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.

     

    Etiquetas:

    Deja una respuesta

    Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *