Home / Working with APIs / Using Axios to make HTTP requests (GET, POST, PUT & DELETE)

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

Working with APIs

May 3, 2022 0

Last updated: November 14, 2022.

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

Another reason it is popular is its simplicity: HTTP requests can be made with minimal code (less than the native Fetch function).

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

In this post, we cover how to use Axios to make HTTP requests of various types (GET, POST, PUT and DELETE) as well as the installation/import steps.

Note that Axios is promise-based, so it will help if you already have a solid understanding of promises.

Installing and importing

Because Axios is a third-party library, before using it you need to install it into your project or use a CDN link before importing it.

Using a CDN link

The easiest way to get up and running with Axios in frontend JavaScript is to include a CDN link in the <head> tag of your HTML document.

For example, jsDelivr provides to following:

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

Other CDN servers are available.

Installing as a dependency

Alternatively, you can install Axios as a project dependency via a package manager such as npm.

You can do so by running the following line of code in your terminal inside your project folder:

npm install --save axios

Then, to import it, in the <head> of your HTML document you need to link to axios.min.js in the node_modules folder:

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

In React

To use Axios in React, install as a dependency as above and then use import...from syntax at the top of your script:

import axios from 'axios'

In Node.js

To use in Node.js, install locally and then import using require:

const axios = require('axios');

Making HTTP requests with Axios

After Axios has been imported into your project, you can make HTTP requests with minimal sytnax.

Request can be made by calling methods available on the axios object you have imported.

GET

To make a GET request, you call axios.get() while passing in the desired URL endpoint in string format.

For result-handling, Axios is promised-based and so it returns a promise object. This can be handled with .then() and .catch() syntax for successful and unsuccessful responses respectively.

If successful, the result is immediately available as a parameter within the .then() method following the call. In case there is an error, .catch() will be executed, with an available error object available in the same way:

axios.get('https://example-endpoint.com/api')
.then(res => console.log(res)) // Logs result object
.catch(err => console.log(err)) // Logs error

POST

To make a POST request with Axios, you call the post() method.

The payload should be passed in as an object in the second argument position.

Any response back from the server 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 can be made in 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 can be made by calling the delete() method:

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 easy by the lightweight and intuitive syntax. This is a major reason why it is a popular alternative to the native Fetch API.