Introduction

Axios is a lightweight HTTP client based on the XMLHttpRequests service. It is similar to the Fetch API and is used to perform HTTP requests

Watch This Video To Learn How To Use It and I am trying to improve my accent sorry for my current English accent it's bad

Introduction: What is the tool for; what was it used for on your project

Axios is a promise-based HTTP client that works both in the browser and in a Node.js environment. It provides a single API for dealing with XMLHttpRequests and node’s http interface. Besides that, it wraps the requests using a polyfill for ES6 new’s promise syntax. Almost any dynamic project you make needs to interface with a RESTFUL API at some point and using Axios is a simple way to do so. On my group’s project, the frontend used Axios to make calls to our backend. We made calls that would gather specific data regarding the three models of our website: cities, counties, and charities.

History: Who created it, when was it created

The first version of Axios was released around 4 years ago, and its open source code is available on GitHub. Axios has has multiple contributors that have contributed to each version of Axios.

Installation

Installing Axios is easy and only requires two steps:

1. Install Axios
   To install with yarn:
   $ yarn add axios
   Install yarn
   To install with npm:
   $ npm install axios –save
   Download node (which includes npm executable)
   Using CDN:

2. After downloading, on top of the JS file that you plan to use Axios on, add the line:
   import axios from ‘axios’;
   Use: step by step by instructions on how to use it
   Performing a GET request
   axios.get('http://api.fightpoverty.online/api/city?page=2’)
   .then(function (response) {
   // handle success
   console.log(response);
   })
   .catch(function (error) {
   // handle error
   console.log(error);
   })
   .then(function () {
   // always executed
   });

Using the example above, you can also give the query string as a parameter like so:
axios.get('http://api.fightpoverty.online/api/city’, {
params: {
page: 2
}
})
.then(function (response) {
// handle success
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
})
.then(function () {
// always executed
});
Using async/await:
async function getCities() {
try {
const response = await axios.get('http://api.fightpoverty.online/api/city?page=2’);
console.log(response);
} catch (error) {
console.error(error);
}
}

Performing a POST request
axios.post(“url”, {
someData: '1',
otherData: “random string”,
completed: true
})
Performing multiple concurrent requests
axios.all([
axios.get(‘http://api.fightpoverty.online/api/city’);
axios.get(‘http://api.fightpoverty.online/api/charity’);
])

Use Cases: details about why to use it
If you’re building an application where you need to consume data from an API, Axios is an easy way to do so. You can also use Axios for POST requests if you would like your application to store user input/data in your own server. In other words, almost any dynamic website that displays data from different sources needs some way to make HTTP requests, and Axios is one of the most popular ways to do so.

Alternatives: what other tools are equivalent, why did you choose this tool
Some other alternatives to Axios include the fetch() method in Javascript or jQuery AJAX.With fetch there’s two steps to get JSON data, the first is to make the call, and the second is to call the .json() method on that response. For example, one query method that used Axios that my group used is shown below
export async function generalCitySearch (text, pageNumber) {
const response = await axios.get(backendAPI+ ‘api/city?q={“filters”:[{“name”:”name”,”op”:”like”,”val”:’ + ‘“%25’ + text + ‘%25”’ + “}]}&page=” + pageNumber + ‘&results_per_page=3’);
return response.data;
}

If we had used fetch(), the method would’ve looked like this:
export async function generalCitySearch (text, pageNumber) {
const response = await fetch(backendAPI+ ‘api/city?q={“filters”:[{“name”:”name”,”op”:”like”,”val”:’ + ‘“%25’ + text + ‘%25”’ + “}]}&page=” + pageNumber + ‘&results_per_page=3’);
let data = await response.json()
return data;
}

As you can see, with Axios, you don’t need to pass the results of the http request to the .json() method; it just gives you the data you’re looking for after get(). Axios is a lot easier to follow and read than the fetch() method or a request with jQuery. One of the backend members of my group had prior experience using Axios in one of his internships and recommended it so we ended up using it instead of the alternatives.
Some other benefits of Axios include:
Transformers: allow performing transforms on data before request is made or after response is received
Interceptors: allow you to alter the request or response entirely (headers as well). also perform async operations before request is made or before Promise settles
Built-in XSRF protection
Has a way to abort a request
Has a way to set a response timeout
Supports upload progress

References

https://alligator.io/react/axios-react/
http://codeheaven.io/how-to-use-axios-as-your-http-client/
https://github.com/axios/axios