paint-brush
Axios or Fetch: What Is Better for HTTP Requests?by@thatIITGirl
2,258 reads
2,258 reads

Axios or Fetch: What Is Better for HTTP Requests?

by thatIITGirl
thatIITGirl HackerNoon profile picture

thatIITGirl

@thatIITGirl

Node js developer

July 11th, 2020
Read on Terminal Reader
Read this story in a terminal
Print this story
Read this story w/o Javascript
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

Both are capable of making all types of API calls (get, post,put.. etc.) Both are based on Promise API which is native to ES6. Fetch() has a two-step process while handling JSON data. The first makes the actual request and then the second is to call the.json() method on the response. Axios handles it, the way it is expected. Error handling is, Error handling. Logically if.fetch() gets an error it would enter the catch() block and should return but, it eventually executes the next then() in chain.

Company Mentioned

Mention Thumbnail
Fetch

Coin Mentioned

Mention Thumbnail
Chain
featured image - Axios or Fetch: What Is Better for HTTP Requests?
thatIITGirl HackerNoon profile picture
thatIITGirl

thatIITGirl

@thatIITGirl

Node js developer

Learn More
LEARN MORE ABOUT @THATIITGIRL'S
EXPERTISE AND PLACE ON THE INTERNET.

Ever wondered why developers are going for Axios over fetch? As we are aware both are the means to deal with HTTP or XMLHttp requests, Both are capable of making all types of API calls (get, post,put.. etc.). Both are based on Promise API which is native to ES6. But what are the major points to be noted?

First, .fetch() has a two-steps process while handling JSON data. The first makes the actual request and then the second is to call the .json() method on the response.

const url = 'https://api.spotify.com/v1/artists/0OdUWJ0sBjDrqHygGUXeCF'

fetch(url)
.then(response => response.json())
.then(data => console.log(data));

As a good developer, our main aim is to minimize the code. Axios deals it with a single line.

const url = 'https://api.spotify.com/v1/artists/0OdUWJ0sBjDrqHygGUXeCF'

axios.get(url)
.then(response => console.log(response));

with Axios, we get the result in JSON format by default.

image

Second is, Error handling. Logically if .fetch() gets an error it would enter the .catch() block and should return but, it eventually executes the next then() in chain. see below:

image

But Axios handles it, the way it is expected.

image

it returns from catch, no more .then() chaining.

So, .fetch() method is a great way of getting HTTP requests native in ES6, but there are just few gotchas, that could be dealt by these third party libraries. 

image
L O A D I N G
. . . comments & more!

About Author

thatIITGirl HackerNoon profile picture
thatIITGirl@thatIITGirl
Node js developer

TOPICS

THIS ARTICLE WAS FEATURED IN...

Permanent on Arweave
Read on Terminal Reader
Read this story in a terminal
 Terminal
Read this story w/o Javascript
Read this story w/o Javascript
 Lite
Scrapbox
Com
Papasearch
Charlesthompson
Ruby6
Hashnode
Learnrepo
Hashnode
Learnrepo

Mentioned in this story

coins
companies