Using Axios to make HTTP requests (GET, POST, PUT & DELETE)

Reading Time: 3 minutes 🕑

Last updated: September 27, 2022.

Axios is a popular and well-supported third-party library for JavaScript used for making HTTP requests. You can use it across JavaScript environments and frameworks, including vanilla JavaScript, React and Node.js.

The beauty of Axios is it that it enables requests to be made with minimal code – even less than JavaScript’s native Fetch API.

The only catch is that, as a third-party library, it requires installation and/or importing. This, however, isn’t much work at all, and is offset by the simple and intuitive syntax it allows you can then use every time you want to make a HTTP request.

If you are a code minimalist, you are probably going to be a fan of Axios.

Table of contents

Installation and import

CDN link

The easiest way to get up and running with Axios to make requests in the browser is to include a CDN link between the <head> tags of your HTML file.

For example, you can use jsDelivr CDN:

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

Install as a dependency

Another option is to install it locally using npm.

For this, you can use the following command to install Axios from the terminal:

$ npm install --save axios

This will install it as a development dependency.

Then, in the <head> section of your HTML, link to axios.min.js in the node_modules folder:

<script src="./node_modules/axios/dist/axios.min.js"></script>

React

In React, you can start using Axios after it is installed locally by importing it to your project with import...from syntax:

import axios from 'axios'

Node.js

In Node, Axios can be imported to a project using require:

const axios = require('axios');

Using Axios

After importing Axios to your project, you can make HTTP requests using very simple syntax.

Requests are made by calling methods available on the axios object you have imported.

GET

To make a GET request, you call the get method on axios and pass in the endpoint. Parameters are allowed in the URL.

axios.get('http2://reqres.in/api/users?page=2')

This will make the GET request, but the result still needs to be handled.

Axios is promise-based, so making a HTTP request with it returns a promise object.

The result of a promise can be accessed with .then syntax, with the result becoming available as a parameter in the necessary passed in function (if successful).

In case there is an error, .catch will be executed, with the error becoming accessible in the same way.

axios.get('https://reqres.in/api/users?page=2')
.then(res => console.log(res)) 
.catch(err => console.log(err))

To get the result out of the .then statement, you may consider passing it to a result-handling function:

axios.get('https://reqres.in/api/users?page=2')
.then(res => { handleResult(res) }) 
.catch(err => console.log(err))

function handleResult(data) {
   console.log(data); // result now available in function
}

POST

To make a POST request with Axios, call the post method on the axios object. The payload should be passed in as an object in the second argument position.

Any response (promise object) can be handled with .then and .catch syntax:

axios.post('https://reqres.in/api/users', {
    name: "Anon",
    job: "Web Developer",
})
.then(res => console.log(res)) 
.catch(err => console.log(err))

PUT

A PUT request updates an existing record and takes a payload.

It is made in exactly the same way as a POST request, except the put method is called on the axios object:

axios.put('https://reqres.in/api/users/3', {
    name: "Anon",
    job: "Web Developer",
})
.then(res => console.log(res)) 
.catch(err => console.log(err))

DELETE

A DELETE request is made by calling the delete method on the axios object.

No payload is required, so there is a no need for an argument in the second position.

axios.delete('https://reqres.in/api/users/2')
.then(res => console.log(res)) 
.catch(err => console.log(err))

Summary

Not so scary, was it? (or maybe it was!)

Once imported to your project, making HTTP requests with Axios is made as simple as possible, making it a popular alternative to JavaScript's native Fetch API.

Plus, Axios offers extensive documentation and compatibility across JavaScript environments and frameworks.

Related links