[go: up one dir, main page]
Scribd
Upload
14 views15 pages

Axios vs Fetch API

The document compares Axios and Fetch API for making API calls, highlighting that Axios offers multiple methods, default settings, interceptors, and better error handling, while Fetch API is simpler but requires more manual setup. Axios provides features like progress tracking and automatic JSON handling, whereas Fetch lacks built-in interceptors and advanced options. Additionally, Axios is a third-party library for Node.js, while Fetch is natively supported in Node.js 18 and above.

Uploaded by

Watch with ganesh.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
14 views15 pages

Axios vs Fetch API

The document compares Axios and Fetch API for making API calls, highlighting that Axios offers multiple methods, default settings, interceptors, and better error handling, while Fetch API is simpler but requires more manual setup. Axios provides features like progress tracking and automatic JSON handling, whereas Fetch lacks built-in interceptors and advanced options. Additionally, Axios is a third-party library for Node.js, while Fetch is natively supported in Node.js 18 and above.

Uploaded by

Watch with ganesh.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

Shivendra Dwivedi

@shivendra-dwivedi
1: API Creation / Call Syntax
Axios: There are 3 ways to do this in axios
1: Main axios() method: axios(config)

2: Axios shorthand methods: axios.get(url [, config]),


axios.post(url [, data [, config]]), etc.

@Shivendra Dwivedi
3: Axios custom instance methods: axios.create(config)

Step 1
Step 2

fetch API: It has only 1 way to do API call.


fetch(url, [options])

Step 1

Step 2
Step 3

Axios = Cleaner + Reusable + Scalable


Fetch = Low-level, needs more boilerplate code.

@Shivendra Dwivedi
2: Default Setting:
Axios: Here we can set default options at two levels
global and instance level. Default options will be applied
on all the API calls that we will make.
Global Level:

Instance Level:

@Shivendra Dwivedi
fetch API:
No default setting option is available. We must repeat
headers & config in every request.

Include headers in each API call


manually

Axios = DRY (Don’t Repeat Yourself)


Fetch = Manual setup in every request

@Shivendra Dwivedi
3: Interceptors:
Axios: Interceptors are functions that run before a
request is sent or before a response is handled by then()
or catch().
Think of them as middleware for HTTP requests.

Request Interceptor

Response Interceptor

fetch API: No built-in interceptor present in fetch API.

@Shivendra Dwivedi
4: Configuration Options:
Axios:
Configuration options let us customize how our API call
behaves, like setting timeouts, transforming data,
showing progress, etc.

1: transformRequest / transformResponse:
transformRequest used to alter the data which will be
send to the server before it’s being send.

adding a timestamp(hard coded) in


the data before it is send to the
server

@Shivendra Dwivedi
parsing the data before
it’s handled by the then()
or catch() blocks

2: onUploadProgress / onDownloadProgress:
With these we can track upload and download progross in
axios.

tracking upload pregress

Total number of bytes to


be uploaded

How many bytes have been uploaded so far.

tracking download
pregress

@Shivendra Dwivedi
3: timeout: Defines the maximum time (in ms) to wait for
a response before canceling the request. If the server
doesn't respond within that time, the request is canceled
internally.

fetch API: Fetch supports basic options: method,


headers, body, signal (for manual cancellation).
It doesn’t have in-built advanced options like
timeout, onUploadProgress, onDownloadProgress,
baseURL, transformRequest/Response, etc.

here trying to mimic


timeout feature in fetch
API

@Shivendra Dwivedi
5: Error handling:
Axios: Simple & Developer-Friendly. Axios automatically
throws errors for: Network issues, Timeout
Non-2xx HTTP status codes (including 404, 500).

fetch API: Fetch does not throw errors for HTTP failures
like 404 or 500. Only throws on network failures (e.g., no
internet). We must check response.ok manually.

manually throwing error.


‘ok’ property is true only
for 2xx range responses.

@Shivendra Dwivedi
6: JSON Handling:
Axios: It handles JSON for you in both directions
(Request / Response) :
Auto stringifies request body, Auto parses JSON response.
No need to manually call JSON.stringify() or res.json().

fetch API: Must handle all manually:


Manually stringify the body
Manually parse response with res.json()

manually handling

@Shivendra Dwivedi
7: API call Canceling:
Axios: Axios previously used CancelToken, but it's now
deprecated. Modern Axios from v0.22.0 uses the
standard AbortController, same as Fetch:

fetch API: Always use AbortController to cancel calls.

@Shivendra Dwivedi
8: Backend compatibility:
Axios:
Axios was not always available natively in the backend
(Node.js). Axios has always been a third-party HTTP client
library that needs to be installed manually.

axios GET API call

fetch API: Since Node.js 18+, the Fetch API is built-in, so


we can use it directly. But, if you're using Node.js < 18,
you need to install a Fetch-compatible library like node-
fetch.

@Shivendra Dwivedi
Node.js v = 18+

Node.js v < 18

@Shivendra Dwivedi
Was this helpful?

, &
for more JavaScript insights!
Shivendra Dwivedi
@Shivendra-Dwivedi

Connect

You might also like