Nuestro primer axios desde nuestra aplicación en Vue - 11
Vamos a configurar la primera consulta mediante axios para consumir un recurso en la Api Rest.
Vamos a configurar la primera consulta mediante axios para consumir un recurso en la Api Rest.
Ya he instalado y configurado actions en nuestra aplicación lo siguiente que nosotros vamos a hacer sería hacer nuestra primera petición empleando axios para eso vamos a adaptar la que ya hicimos por acá y ahí comparamos un poco entonces antes de eso vamos a ver un pequeño ejemplo unos ejemplos para que sepamos cómo funciona.
axios.get('http://code4movies.test/api/pelicula')
.then(res => this.movies = res.data)
.catch(error => console.log(error))
fetch('http://code4movies.test/api/pelicula')
.then(res => res.json())
.then(res => console.log(res))
Fíjate que es similar pero también tiene algunas cositas distintas a las peticiones de tipo fecha aquí que colocamos es como nombre del del método la función que estamos empleando es hace referencia al tipo de petición http:
axios.get
Que se está empleando en este caso es como es una función get la petición es de tipo get y para post simplemente colocamos post:
axios.post
Aquí hacemos una petición de tipo post y lo mismo si es put path o delete hay un método para cada uno de ellos es decir aquí colocarías put path o delete
En cuanto a la Data tenemos varias formas realmente Una vez colocando aquí directamente los parámetros en el caso de get:
axios.get('http://code4movies.test/api/pelicula?parameterGet=1')
axios.get('/user?id=12345')
Recuerda que la Data viaja por la URL o también podemos emplear la segunda opción que esto varía dependiendo del tipo de método si es get o post por ejemplo como segunda opción colocamos en este caso opciones:
axios.get('/user', {
params: {
id: 12345
}
})
axios.post('/user', {
data1: 'Value1',
data2: 'Value2'
})
Valga la redundancia como los parámetros también puede ser los headers entre otros pero otra vez no haría falta para nuestro caso en este caso los parámetros que sería el equivalente a lo que colocamos acá fíjate que es el mismo cuerpo o la misma Data ID y 1 2 3 4 5 y lo mismo de acá es decir puedes emplear esta o esta solamente para peticiones de tipo get para post
El segundo parámetro es decir el primero es la la ruta y el siguiente es las opciones que esta incluye la Data aquí colocamos es la Data que va vía el body Recuerda que esta Data en este caso va vía parámetros vía el body Entonces en este caso se configura de la siguiente forma.
Tenemos el Catch que funciona de manera equivalente a lo que tenemos acá:
axios.post('/user', {
data1: 'Value1',
data2: 'Value2'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
Es decir a la final son a la final estamos conectándonos mediante una petición http con todo lo que te comentaba antes es decir es una petición de tipo asíncrona es una promesa se resuelve puede ser en un segundo 1.5 segundos unos milésimas de segundo puede que no se resuelva dependiendo de si ocurre un error en el servidor un error aquí en el cliente ha ciarlo o simplemente una una falla en internet cualquier cosa y por lo tanto pueden ocurrir errores pero aquí la diferencia es que por una parte no lo tenemos que castear y por otra parte podemos definir los tipos de métodos más de una manera más sencilla también puedo buscar el fetch.
- Andrés Cruz
Este material forma parte de mi curso y libro completo; puedes adquirirlos desde el apartado de libros y/o cursos Curso y Libro CodeIgniter 4 desde cero + integración con Bootstrap 4 o 5 - 2025.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter
Acepto recibir anuncios de interes sobre este Blog.
!Cursos desde!
10$
En Udemy
Quedan 0d 22:05!
!Cursos desde!
4$
En Academia
Ver los cursos!Libros desde!
1$
Ver los libros