How to make AJAX requests with Axios

As web developers, we spend a lot of time finding newer, more efficient methods to get the job done.

When working with AJAX requests I began with using jQuery. As my knowledge of JavaScript expanded I began to work with the ES6 Promise API. I began discovering new clients to service my AJAX request such as the Fetch API.

Today I will be discussing the Axios.js Library.

What is an AJAX request?

AJAX stands for Asynchronous Javascript And XML. It is the use of the XMLHttpMakeRequest object to communicate via requests toa server.

What is Axios?

Axios is an HTTP client that serves AJAX requests similar to the jQuery implementation or the Fetch API that is built into modern web browsers. Axios accounts for the use of the Promise API introduced in ES6.

How to install Axios

Installing Axios is easy and can be done using several different package managers or content delivery networks of your personal preference.

To install using npm:

$ npm install axios

To install using yarn:

$ yarn add axios

To install using bower:

$ bower install axios

To install using jsDeliver:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

To install using unpkg:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

How to perform a GET request in Axios.js

Performing get requests using Axios is simple and straightforward.

To perform a get request, we can pass in a config object to the axios method in the Axios.js library. This object will be populated with the config parameters we would like to include in the request. Axios returns the response data back in JavaScript Object Notation (JSON) by default.

Axios also supplies other useful default config parameters to allow for protection from Cross-Site Scripting (XSS) and Cross-Site Request Forgery (XCRF) attacks.

In this example, I will demonstrate how to use Axios using the scenario in which I wanted to use Axios to reach the Google home page.

First, I must make a get request to the Google landing URL.

axios({
  method: 'get',
  url: 'https://google.com/',
})
  .then(function (response) {
    // successful request
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.error(error);
  })

Since we know the Axios library is promised based we want to call .then to run on a successful request. We can catch all the errors using .catch to log the error message in the console.

How to perform a POST request in Axios.js

Similar to performing GET requests, a POST request is no feat to fear with Axios.js.

If I wanted to perform a search through the Google search engine via Axios.js, I could achieve this in a similar fashion to the example I showed previously of the implementation of a GET request using the library.

axios({
  method: 'post',
  url: 'https://google.com/',
  data: {
  searchEntry: 'How to perform a POST request in Axios'
}
})
.then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.error(error);
  })

Instead of using a GET request this time, we will assign the method property of the config object to be a POST request now because we are sending data to the Google search engine.

Using the .get and .post methods in Axios.js

Similar to the implementation of AJAX encapsulation in the jQuery library, Axios.js comes with built-in methods to shortcut sending GET and POST requests.

To send a GET request using .get():

The .get method only requires one parameter: the URL you are trying to access.

axios.get('https://google.com/')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.error(error);
  })
  .then(function () {
    // always executed
  });

In the example shown above, we are passing in the Google landing page we would like to send our GET request to.

To send a POST request using .post():

The .post method takes in two parameters. The first parameter is the URL you are trying to access. The second parameter is the data object you are trying to send in your POST request.

axios.post('https://google.com/', {
  searchEntry: 'How to perform a POST request in Axios'
})
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.error(error);
  });

In this example above, we are calling the .post method in the Axios library and passing in the Google URL as the first parameter and the data object we want to send as the second parameter.

Thanks for reading my blog post!