🔗 API Integration & Axios

Fetch API vs Axios, Axios instances, interceptors, async/await, and error handling.

Fetch API vs Axios

Axios simplifies HTTP requests with automatic JSON parsing and interceptor support.

Feature	Native fetch API	Axios Client
JSON Parsing	Manual (res.json())	Automatic (res.data)
Error Handling	Doesn't reject on 404/500	Rejects promise on HTTP errors
Interceptors	Not supported natively	Built-in request/response interceptors

Axios Instance & Interceptors

Creating a centralized Axios API client with authorization headers.

api.js JavaScript

import axios from 'axios';

export const apiClient = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000
});

apiClient.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) config.headers.Authorization = `Bearer ${token}`;
  return config;
});

React Router

Redux Toolkit