Both Axios and Fetch API return Promises when you make an HTTP request. The returned promise will also be known as the response from the location providing the requested data. Although they may be fairly similar, there are some differences in the syntax. There are also different ways to handle successes and errors when sending a request.

Axios Examples

Axios is a JavaScript library typically imported to make HTTP requests via NodeJS or XMLHttpRequests directly from the browser and supports the Promise API that is native to JS ES6. It can be used to intercept HTTP requests and responses. It also enables client-side protection against XSRF and the ability to cancel requests.

// Axios GET request example
import axios from 'axios'
 
const url = 'https://localhost:3000/api/data'
const headers = {
'Accept': 'application/json',
'Content-Type': 'application/json;charset=UTF-8'
}
 
axios.get(url,headers)
.then(response => {
// This will display the response status code 200 on success within the console
console.log(response.status)
// This will display the data response in the console as an Object array
console.log(response.data)
// Do stuff with the data
response.data.map(item => {
...
})
})
.catch(error => {
// This will display the error status code and message in a basic alert box
alert(`${error.status}: ${error.message}`)
})
// Axios POST request example
import axios from 'axios'
 
const url = 'https://localhost:3000/api/save'
const data = {
'id': '1a2b3c4d5e',
'firstName': 'Jean-Luc',
'lastName': 'Picard',
'title': 'captain'
}
const headers = {
'Accept': 'application/json',
'Content-Type': 'application/json;charset=UTF-8'
}
 
axios.post(url,data,headers)
.then(response => {
// This will display the response on success within the console
console.log(response)
})
.catch(error => {
// This will display the full error within the console
console.log(error)
})

Fetch Examples

The Fetch API provides a global fetch() method defined on the window object. The API also provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline including the requests and responses. The fetch method has one mandatory argument — the URL of the resource to be fetched. This method returns a Promise that can be used to retrieve the response.

// Sample endpoint data
[{
id: '1a2b3c4d5e',
username: 'enterprise2',
firstName: 'Jean-Luc',
lastName: 'Picard',
title: 'captain',
email: 'jlpicard@enterprise.com'
},
{
id: '6f7g8h9i0j',
username: 'voyager1',
firstName: 'Kathryn',
lastName: 'Janeway',
title: 'captain',
email: 'kjaneway@voyager.com'
}]
// Fetch GET request example
fetch('http://localhost:3000/assets/data')
.then(response => {
// This will parse our response as JSON data
return response.json()
})
.then(data => {
// Do stuff with the data
data.map(user => {
console.log(user.username)
...
})
})
.catch(error => {
console.log(error)
})
 
// Fetch POST request example
const newItem = {
'id': '5a4b3c2d1e',
'username': 'enterprise1',
'firstName': 'James',
'lastName': 'Kirk',
'title': 'captain',
'email': 'jkirk@enterprise.com'
}
const options = {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(newItem)
}
 
fetch('http://localhost:3000/api/add',options)
.then(data => {
// Do stuff with the data response
...
})
.catch(error => {
console.log(error)
})

What’s the Difference?

We’ve established that both the API and library virtually do the same thing, so what’s the difference? One important difference to note is that fetch() is not part of the JavaScript spec, but the WWTAG. As a result, you will not be able to use it in a NodeJS environment — unless you install a unique module.

Depending on whether one is building a single page application or just a static site pulling locally stored data, you can use the chart below to explore the differences behind-the-scenes. Determine what your project requires to GET, POST, PUT, or DELETE data and the decision should be an easy one.

Axios Fetch
Stand-alone third party package that can be easily installed. Built into most modern browsers; no installation is required as such.
Provides built-in XSRF protection. Does not offer XSRF protection.
Utilizes the data property. Utilizes the body property.
Data response contains the object. Body response has to be stringified.
Request is ok when status is 200 and statusText is ‘OK’. Request is ok when response object contains the ok property.
Automatically transforms JSON data. A two-step process when handling JSON data — first, to make the actual request; second, to call the .json() method on the response.
Allows cancelling requests and request timeout. Does not allow cancelling requests and request timeout.
Built-in ability to intercept HTTP requests. By default, doesn’t provide a way to intercept requests.
Built-in support for upload/download progress. Does not support upload/download progress.