In Sync with Asynchronous Request Methods: Axios
Tags: webdev, codenewbie, beginners
Published: 2020-06-01 01:52:31

#Introduction
When developing a full stack application with outside resources such as an API, we need a way for the front end to communicate with the server in the back end to get some data. There are multiple ways to do this such as using the reacts built in fetch API method and the XMLHttpRequest or we could use jQuery’s AJAX requests. The issue with using AJAX is that there are a lot of components that go with making a request and most of all we would love to distance ourselves from jQuery. Today we will be discussing an alternative, using Axios.

##What is Axios
Axios is a promise-based HTTP request library that allows us to interact with rest API's. Because Axios is a promise-based library it supports making asynchronous request so that your browser can function normally while waiting for the request to be handled. We will now talk about how to make HTTP requests using Axios.

##GET Request
When we want to get some data we can make an *axios.get()* request. The first parameter is a URL to perform the request on. The response that comes back, if the promise is resolved, will be contained in the *.then()* and will be an object that consists of keys of data, status, status text, and headers.  The data key will contain the data we set out to request. Let us look at an example.
###One way to make a GET request
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xmrtg65vx7j92rqg7u6p.jpg)
In the example above, we see the first way we can get data using the axios get method. It consists of and object with keys for the method and endpoint for the URL we want to get the data from. 

###Another way to make a GET request
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3bxzkbtqg2vi82k5hwjm.jpg)
In this example, we can attach the HTTP method on axios and just pass in the URL as the parameters then chain on our then and catch on to it. This way is much easier to read and does not take up a lot of space.

##POST Request
If we want to post some data to a specific endpoint, we can use the *axios.post()* method. The first parameter is a specific URL or endpoint. the second parameter is and object containing the data we want to send to our server. 
###One way to make a POST request
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ozkicmpm4s3dt7hsb87e.jpg)
In the above example we pass in a second parameter which is an object of the data we want to send to the server

###Another way to make a POST request
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tnjp3qitf5um85sfetvm.jpg)
In this example we see an easier wat to write the same request 

##Axios.all
Because axios utilizes promises, it uses a familiar promise method. We can have multiple request happen simultaneously with the *axios.all()* method. This method takes in an array of requests and returns and object if both request resolves. even though it can take multiple request we only need to chain on one *then()* and one *catch()* to it. Let us look at an example.
###Axios.all example
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/aw61gwh988omvvhg825a.jpg)

**Conclusion**
In conclusion, Axios is a library used to make HTTP requests. Because of its asynchronous nature we can be sure that our browser can function without interruption while waiting for the request to be resolved. Axios comes with a lot of built in methods that make making these request easy to write.