Axios es una biblioteca popular de JavaScript utilizada para realizar solicitudes HTTP. Es un cliente HTTP basado en promesas utilizado en JavaScript o con otras bibliotecas de JavaScript como Vue.js o React.js. Debido a su isomórfica naturaleza, Axios puede ejecutarse en el lado del cliente y del servidor simultáneamente utilizando la misma base de código. Además, es una herramienta potente utilizada colectivamente con async para formular una API fácil de usar. Por encima de todo, Axios tiene la capacidad de abortar una solicitud automáticamente, lo que de otro modo sería una batalla cuesta arriba.
¿Cómo funciona Axios?
Axios utiliza la configuración predeterminada de promesa para ejecutarse en paralelo en el navegador y Node.js con el mismo código. Utilizando la función HTTP basada en promesas, Axios realiza operaciones CRUD y envía solicitudes HTTP a puntos finales REST . En este tutorial, te guiaremos a través de los pasos para configurar una API REST con Axios en Vue.js.
¡Empecemos!
Requisitos previos
Para poder completar este tutorial, debes tener lo siguiente:
- Node.js instalado y configurado en tu sistema Ubuntu.
- Si estás utilizando Centos OS, puedes seguir esta guía para instalar Node.js en Centos 8.
- Conceptos básicos de JavaScript.
Paso 1: Instalación de Axios
Antes de instalar Axios, es importante actualizar los repositorios de tu sistema para evitar errores o fallos en la instalación:
|
1 |
sudo apt-get update |
A continuación, instala Axios utilizando el npm paquete de software:
|
1 |
npm install axios --save |
Alternativamente, puedes instalar Axios utilizando el yarn gestor de paquetes:
|
1 |
yarn add axios |
Después de eso, crea un proyecto de Vue.js e importa Axios en él:
|
1 |
import axios from ‘axios’; |
En el siguiente paso, utilizaremos el método axios.get() para realizar peticiones.
Paso 2: Obtener datos utilizando una solicitud GET
Aquí, vamos a obtener datos utilizando una solicitud GET . Echa un vistazo a cómo utilizamos el método axios.get() para recuperar datos directamente desde un método:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<template> <div> <ul v-if="posts && posts.length"> <li v-for="post of posts"> <p><strong>{{post.title}}</strong></p> <p>{{post.body}}</p> </li> </ul> <ul v-if="errors && errors.length"> <li v-for="error of errors"> {{error.mensaje}} </li> </ul> </div> </template> <script> import axios from "axios"; export default { data() { return { posts: [], errors: [], }; }, // Obtiene las publicaciones cuando se crea el componente. created() { axios .get(`http://jsonplaceholder.typicode.com/posts`) .then((response) => { // Las respuestas JSON se analizan automáticamente. this.posts = response.data; }) .catch((e) => { this.errors.push(e); }); } }; </script> |
Verás la versión async o await :
El código anterior recuperará las publicaciones de JSONPlaceholder y distribuirá los datos de manera desordenada. Cualquier tipo de error encontrado aparecerá en una lista desordenada diferente.
Paso 3: Enviar datos utilizando una solicitud POST
Al contrario del método axios.get() , ahora utilizaremos el método axios.post() para realizar una solicitud POST. Echa un vistazo a cómo aplicar el método axios.post() para obtener datos:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<template> <div> <input type="text" v-model="postBody" @change="postPost()" /> <ul v-if="errors && errors.length"> <li v-for="error of errors"> {{error.message}} </li> </ul> </div> </template> <script> import axios from "axios"; export default { data() { return { postBody: "", errors: [] } }, methods: { // Envía publicaciones al servidor cuando se llama. postPost() { axios .post(`http://jsonplaceholder.typicode.com/posts`, { body: this.postBody }) .then((response) => {}) .catch((e) => { this.errors.push(e) }) } } } </script> |
Verás la versión async o await :
El código anterior creará un campo de entrada que envía contenido a JSONPlaceholder. Cualquier tipo de error encontrado aparece en una lista desordenada diferente.
Paso 4: Configurar una instancia base común
En este paso, vamos a crear una instancia base común utilizando el método axios.create() . El objetivo detrás de configurar una instancia base común es compartir una URL base entre todas las instancias.
La instancia base común resulta útil si todas tus llamadas utilizan un servidor o encabezado común como el encabezado Authorization :
|
1 2 3 4 5 6 7 8 |
import axios from "axios"; export const HTTP = axios.create({ baseURL: `http://jsonplaceholder.typicode.com/`, headers: { Authorization: "Bearer {token}" } }) |
Finalmente, ya estás listo para usar HTTP en tu componente:
Con toda la configuración establecida, nuestro http-demo.js está establecido. Ahora, Axios se conecta con JSONPlaceholder y el encabezado Authorization al mismo tiempo utilizando la misma base de código. La mejor parte es que Axios recupera las publicaciones, identifica los errores y los muestra en una lista desordenada.
Conclusión
En este tutorial, hemos aprendido los conceptos básicos de enviar y recibir datos usando Axios. Además, creamos una instancia base común para compartir una URL común. Sin embargo, este no debe ser el final de tu aprendizaje de Axios. Te animamos a practicar otros métodos de Axios para enviar POST, PUT, PATCH y DELETE solicitudes. Sumérgete en la documentación de Axios para explorar el tema e intentar construir proyectos por ti mismo.
Para aprender más sobre temas de Axios y Vue.js, consulta estos recursos de nuestro blog:
- Uso del cliente HTTP Axios en una aplicación React: un tutorial
- Uso de Vue y Axios para mostrar datos de una API
¡Feliz computación!
Comentarios
Aún no hay comentarios. Sea el primero.