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.

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.

fetch vs axios

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 

Configurar Datos en el post/path/put en axios

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.

Catch para capturar errores

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.

12-02-2025 - Andrés Cruz

In english

• Categoría
• /
• Vue
• /
• Nuestro primer axios desde nuestra aplicación en Vue - 11