Axios

Why Axios with React

ReactJS is a frontend library which has a primary function of rendering elements on the DOM effectively. In order to trim the size and keep the focus on core functionality, ReactJS does not ship with an in-built HTTP client like JQuery. Instead it provides us with a framework to create Components, which can be extended and integrated with third party tools to add more functionality. For example, Redux is a commonly used tool along with React for better State Management. Likewise, Axios is one of the most widely and un-opinionated tool used with React for making HTTP requests.

We will use Axios to make requests to our Expertiza backend which will transact with JSON data, and based on the responses we receive, appropriate Components and routes will be displayed to the user in the browser. The best part about this is, by keeping the backend same, we can also extend it to create a Mobile App for Expertiza based on JSON REST service.

Introduction

Axios is a Promise-based HTTP client prominently used in conjunction with frontend libraries like React or Vue. Its main function is to make asynchronous HTTP requests to the REST service providers, using the typical request-response pattern usually in JSON format. It supports the Promise API which ensures proper handling of the asynchronous requests.

Installation

Axios can be simply installed locally (in the node_modules of your project) as a NPM package using the command npm install axios or it can also be installed globally (in the system node_modules cache) using the command npm install -g axios

Usage

Performing a GET AJAX request

 axios.get('/user', {
   params: {
     ID: 12345
   }
 })
 .then(function (response) {
   console.log(response);
 })
 .catch(function (error) {
   console.log(error);
 })
 .finally(function () {
   // always executed
 });

Axios also supports async/await functions for better handling of promises

async function getUser() {
 try {
   const response = await axios.get('/user?ID=12345');
   console.log(response);
 } catch (error) {
   console.error(error);
 }
}