Skip to main content

Axios

Based on the XMLHttpRequests service, Axios is a lightweight HTTP client. It works in the same way as the Fetch API and is used to make HTTP requests.

Introduction

Axios is a promise-based HTTP client that runs in the browser as well as in Node.js. It has a single API for working with XMLHttpRequests and the http interface of node. Aside from that, it encapsulates the requests in a promise polyfill for ES6 new. Almost any dynamic project you create will at some time need to interact with a RESTFUL API, and utilising Axios is a straightforward method to accomplish so. The frontend of my group's project used Axios to make calls to our backend. We made phone calls to acquire particular information about our website's three models: cities, counties, and nonprofits.

Axios was first released about four years ago, and its open source code is available on GitHub. Axios has a large number of contributors who have contributed to each edition.

Features of Axios

  • Make XMLHttpRequests from the browser
  • Make http requests from node.js
  • Supports the Promise API
  • Intercept request and response
  • Transform request and response data
  • Cancel requests
  • Automatic transforms for JSON data
  • Client side support for protecting against XSRF

Browser Support

ChromeFirefoxSafariOperaEdgeIE
Latest ✔Latest ✔Latest ✔Latest ✔Latest ✔11 ✔

Installation

Using npm:

$ npm install axios

Using bower:

$ bower install axios

Using yarn:

$ yarn add axios

Using jsDelivr CDN:

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

Using unpkg CDN:

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

Request and response interception

This specific feature of Axios has gotten a lot of attention. As a result, I will not provide a thorough explanation. In a word, interceptors allow the browser to examine HTTP requests from a central location.

The following is an example of a request interceptor.

// declare a request interceptor
axios.interceptors.request.use(config => {
  // perform a task before the request is sent
  console.log('Request was sent');

  return config;
}, error => {
  return Promise.reject(error);
});

// GET request
axios.get('https://mysite.com/user')
  .then(response => {
    console.log('This is printed after ');
  });

The “Request was sent” report will be produced on the console whenever a request is sent. Before any HTTP requests are sent to a server, this is where you can do any activity. There are also response interceptors, which work in a similar way.

GitHub Repo:

License: MIT

Repo Link: https://github.com/axios/axios