Configuring a REST API with Axios in Vue.js featured image

Configuring a REST API with Axios in Vue.js: A Tutorial

Axios is a popular JavaScript library used to make HTTP requests. It is a promise-based HTTP client used in JavaScript or with other Javascript libraries like Vue.js or React.js. Due to its isomorphic nature, Axios can run on the client and server-side simultaneously using the same codebase. Also, it is a powerful tool used collectively with async to formulate a user-friendly API. Above all, Axios has the ability to abort a request automatically, which is otherwise an uphill battle.

How Does Axios Work?

Axios uses the default promise settings to run parallel in the browser and Node.js with the same code. Using the promise-based HTTP feature, Axios performs CRUD operations and sends HTTP requests to REST endpoints. In this tutorial, we’ll walk you through the steps of configuring a REST API with Axios in Vue.js.

Let’s begin!

Prerequisites

To be able to complete this tutorial, you must have the following:

Step 1: Axios Installation

Before we install Axios, it is important to update your system repositories to avoid errors or installation failure:

Next, install Axios using the npm software package:

Alternatively, you can install Axios using the yarn package manager:

After that, create a Vue.js project and import Axios on it:

In the next step, we will use the axios.get() method to pull requests.

Step 2: Pull Data Using GET Request

Here, we are going to pull data using a GET request. Take a look at how we use the axios.get() method to fetch data directly from a method:

You’ll see the async or await version:

async_await

The above code will retrieve posts from JSONPlaceholder and distribute data in an unordered fashion. Any type of error/s encountered would appear in a different unordered list.

Step 3: Push Data Using POST Request

Opposite to the axios.get() method, we will now use the axios.post() method to make a POST request. Take a look at how to apply the axios.post() method to pull data:

You’ll see the async or await version:

asyn_await2

The above code will create an input field that submits content to JSONPlaceholder. Any type of error/s encountered appears in a different unordered list.

Step 4: Set Up a Common Base Instance

In this step, we are going to create a common base instance using the axios.create() method. The objective behind setting up a common base instance is to share a base URL across all the instances.

The common base instance comes in handy if all your calls are using a common server or header like Authorization header:

Finally, you are all set to use HTTP in your component:

Configuring a REST API with Axios in Vue.js http_format

With all the configuration set up, our http-demo.js is established. Now, Axios connects with the JSONPlaceholder and Authorization header at the same time using the same codebase. The best part is that Axios retrieves the posts, identifies the errors, and displays them in an unordered list.

Conclusion

In this tutorial, we have learned the basics of pushing and pulling data using Axios. Besides, we created a common base instance to share a common URL. However, this must not be the end of your Axios learning. We encourage you to practice other Axios methods to send POST, PUT, PATCH and DELETE requests. Dive in the Axios documentation to explore the topic and try building projects yourself.

To further learn more on Axios and Vue.js topics, check these resources from our blog:

Happy Computing!