Stop 10 · API IntegrationTopics · 2/16

Axios

In short

Axios is a small library that does what fetch does, with fewer lines. Many company codebases use it, so you'll meet it in your first internship for sure.

A popular HTTP client library offering a friendlier API than raw `fetch` — automatic JSON parsing, interceptors, and built-in request/response transformation.

The jaadu rides a delivery scooter up to a familiar gate and waves at the guard.

Think of it like this

A delivery partner who knows the area

With fetch, you give directions turn by turn. Axios is the regular Swiggy rider who already knows your gate code, your floor, and that you want extra chutney. Set it up once, and every order goes the same way.

Watch it happen

An Axios request with an interceptor

Your code

Interceptor

API

api.get("/courses")

1/4Your code asks the api instance for page 2 of courses. No base URL, no headers written here.

The big ideas

What you need to know

JSON is parsed for you

The data comes ready in res.data. No separate res.json() step.

It throws on bad status

A 404 or 500 rejects the promise, so your catch block actually runs. fetch doesn't do this.

Create an instance

axios.create() sets a baseURL, timeout and headers once. Every call then uses them automatically.

Interceptors

Functions that run before every request or after every response. Perfect for adding a token or logging out on 401.

See it in code

Walk through the code

1import axios from "axios";2 3export const api = axios.create({4  baseURL: "https://api.example.com",5  timeout: 8000,6});7 8// Add the token to every request9api.interceptors.request.use((config) => {10  const token = localStorage.getItem("token");11  if (token) config.headers.Authorization = `Bearer ${token}`;12  return config;13});14 15const { data } = await api.get("/courses", { params: { page: 2 } });

1/3Make one instance with the base URL and a timeout. Import this everywhere.

params builds the query string for you, so this calls /courses?page=2. The interceptor quietly attaches the token every time.

Save yourself the pain

Common mistakes

Oops

Writing res.json() after an Axios call, out of fetch habit.

Do this instead

Axios already parsed it. Just read res.data.

Oops

Importing plain axios everywhere and repeating the base URL and headers.

Do this instead

Make one instance with axios.create() and import that instance across the app.

Your mission

Swap fetch for Axios

~20 min

Quick check

An API returns a 500 error. What happens with Axios by default?

Go deeper

1Replace a `fetch` call in a project with the equivalent Axios call.
2Set up an Axios instance with a base URL and default headers.
3Add a request interceptor that automatically attaches an auth token.