Performing GET Requests With Axios

HTTP Requests:

HTTP (Hypertext Transfer Protocol) requests are a medium that enables clients such as browsers of web applications to communicate with servers to retrieve or send data over the internet. They consist of a request method (such as GET, POST, PUT, DELETE), a URL specifying the resource, headers containing additional information, and a request body carrying data (optional). The server then processes the request and returns a response, typically including a status code indicating the outcome (success or failure) along with any requested data as response or error messages...

Axios:

Axios is a popular JavaScript library that allows users to make HTTP requests to a RESTful or GraphQL API. It performs similar tasks to fetch API provided by browsers. Axios makes use of promises to fulfill the request. Axios is better than Fetch API because of the following reasons:...

How does Axios work?

Axios operates by initiating HTTP requests in NodeJS and utilizing XMLHttpRequests in the browser. Upon successful request, a response containing the requested data is received. Conversely, in case of failure, an error is returned. Additionally, Axios enables interception of requests and responses, facilitating their transformation or modification....

Installing Axios NPM for Your Project:

There are several ways to incorporate Axios into your project....

Creating an Axios Instance With Default Settings:

If one wants to create an axios instance with default settings, axios.create() method can be used. It allows you to create a new instance of Axios with default configuration options. It can be done like this....

Performing GET Requests With Axios:

In the following example, a GET request is being made to a specified api endpoint:...

Performing POST Requests With Axios:

We just need to customize the config object passed to the axios function for every type of HTTP request we want to make. POST request can be made using Axios to post data to a given endpoint and trigger events. To perform an HTTP request in Axios, we call axios.post()....

Sending Data with POST Requests:

Here we make use of async and await syntax which are methods under Promises API. They help in writing cleaner and manageable code that is easier to interpret and gives a synchronous feel. Any request object can be sent in the similar fashion and this is how axios is incorporated into the code using a wrapper function....

Handling Response Data From POST Requests:

Now let’s take the above example for understanding our response. Once an HTTP POST request is made, Axios returns a promise that is either fulfilled or rejected, depending on the response from the backend service....

Shorthand Methods for Axios HTTP Requests:

Axios provides various shorthand methods for performing different types of requests. They are as follows:...

Error Handling With Axios:

An HTTP request can succeed or fail. Errors can occur and it is the developer’s responsibility to handle the errors for a better user experience. Errors can occur due to a variety of reasons like server errors, authentication errors, missing parameters and requesting resources that may not exist. Axios, by default, rejects any response with a status code that falls outside the successful 2xx range. But this feature can be modified to specify what range of HTTP codes should throw an error using the validateStatus config option. Following is an example depicting this:...

Conclusion:

The only reason axios is so popular among developers is because of useful and simple to understand features. It has a number of configurations that allow us to change the default behavior to suit our needs. This article depicts how seamlessly one can use axios to connect their client side service to backend service or any other API....