Our first axios from our application in Vue - 11

Let's configure the first query using Axios to consume a resource in the Rest API.

I have already installed and configured actions in our application. The next thing we are going to do is make our first request using Axios. For that, we are going to adapt the one we already made here and there we will compare a little. So before that, we are going to see a small example, some examples so that we know how it works.

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))

Note that it is similar but also has some things that are different from the date type requests here. What we put here is as the name of the method, the function that we are using refers to the type of http request:

axios.get

What is being used in this case is that it is a get function, the request is of type get and for post we simply put post:

axios.post

Here we make a post type request and the same if it is put path or delete there is a method for each of them, that is, here you would place put path or delete

Configure Data in post/path/put in axios

As for the Data we have several ways really. Once placing the parameters directly here in the case of get:

axios.get('http://code4movies.test/api/pelicula?parameterGet=1')
axios.get('/user?id=12345')

Remember that the Data travels through the URL or we can also use the second option that varies depending on the type of method if it is get or post, for example as a second option we place in this case options:

axios.get('/user', {
    params: {
      id: 12345
    }
  })

axios.post('/user', {
    data1: 'Value1',
    data2: 'Value2'
  })

Excuse the redundancy, as the parameters can also be the headers among others, but again it would not be necessary for our case. In this case, the parameters would be the equivalent of what we put here. Note that it is the same body or the same Data ID and 1 2 3 4 5 and the same here, that is, you can use this or this only for get type requests for post.

The second parameter, that is, the first is the route and the next are the options that it includes. The Data here we put is the Data that goes via the body. Remember that this Data in this case goes via parameters via the body. So in this case it is configured in the following way.

Catch to capture errors

We have the Catch that works in an equivalent way to what we have here:

axios.post('/user', {
    data1: 'Value1',
    data2: 'Value2'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

That is to say, in the end, we are connecting through an http request with everything I mentioned before, that is to say, it is an asynchronous request, it is a promise, it can be resolved in one second, 1.5 seconds, a few thousandths of a second, it may not be resolved depending on whether an error occurs on the server, an error here on the client, or simply a failure on the Internet, anything and therefore errors can occur, but here the difference is that on the one hand we don't have to cast it and on the other hand we can define the types of methods in a simpler way, I can also search for the fetch.

12-02-2025 - Andrés Cruz

En español

• Category
• /
• Vue
• /
• Our first axios from our application in Vue - 11