📡 API Requests with Axios

Why Axios?

Axios is a promise-based HTTP client that runs in both the browser and Node.js. It has stayed popular for years because it trims away the repetitive boilerplate that raw HTTP calls demand: it parses JSON for you, treats HTTP error statuses as real errors, supports request timeouts and cancellation out of the box, and lets you register interceptors that run on every request or response.

💡 Analogy: If sending an HTTP request were like mailing a package, the built-in fetch is the basic postal service — it gets there, but you handle the paperwork. Axios is the premium courier: tracking, insurance, automatic customs forms (JSON parsing), and a single desk (interceptors) that stamps every parcel the same way.

Install it into your React project:

npm install axios

Axios vs. the Fetch API

fetch is built into every modern browser and is perfectly capable. Axios isn't "better" so much as more convenient for app-scale code. The two differences that bite most often are JSON handling and error handling.

See the error-handling gap concretely. With fetch, a 404 or 500 does not throw:

// fetch: a failing status still "succeeds" — you must check res.ok yourself
const res = await fetch('/api/users');
if (!res.ok) {
  throw new Error(`Request failed: ${res.status}`);
}
const data = await res.json();

// axios: a failing status rejects, landing in catch automatically
try {
  const { data } = await axios.get('/api/users');
} catch (err) {
  console.error(err.response?.status);   // e.g. 404
}

The Four Basic Requests

The four verbs you'll use constantly map to reading and changing data. Each returns a promise resolving to a response object whose data property holds the parsed body.

import axios from 'axios';

const BASE = 'https://api.example.com';

// GET — read a collection
async function getUsers() {
  const { data } = await axios.get(`${BASE}/users`);
  return data;
}

// POST — create a new record
async function createUser(user) {
  const { data } = await axios.post(`${BASE}/users`, user);
  return data;
}

// PUT — replace/update an existing record
async function updateUser(id, user) {
  const { data } = await axios.put(`${BASE}/users/${id}`, user);
  return data;
}

// DELETE — remove a record
async function deleteUser(id) {
  await axios.delete(`${BASE}/users/${id}`);
}

{
  data,        // the parsed response body — what you usually want
  status,      // HTTP status code, e.g. 200
  statusText,  // e.g. 'OK'
  headers,     // response headers
  config       // the request configuration that produced this response
}

Handling errors precisely

When a request fails, Axios gives you an error object with three distinct shapes. Checking them tells you where things broke:

try {
  const { data } = await axios.get('/api/data');
} catch (err) {
  if (err.response) {
    // Server responded with a non-2xx status
    console.error('Status:', err.response.status);
    console.error('Body:', err.response.data);
  } else if (err.request) {
    // Request sent, but no response (server down, network offline)
    console.error('No response received');
  } else {
    // Something went wrong building the request
    console.error('Setup error:', err.message);
  }
}

A Reusable Axios Instance

Calling axios.get('https://api.example.com/...') and repeating the base URL everywhere is fragile. Instead, create one configured instance and import it wherever you need the API. This is the single most important habit for keeping API code maintainable.

// src/services/api.js
import axios from 'axios';

const api = axios.create({
  baseURL: import.meta.env.VITE_API_URL || '/api',   // Vite env var
  timeout: 10000,                                      // 10s safety net
  headers: {
    'Content-Type': 'application/json',
    Accept: 'application/json'
  }
});

export default api;

Now build thin, readable service modules on top of the instance:

// src/services/userService.js
import api from './api';

export const userService = {
  getAll: () => api.get('/users').then((r) => r.data),
  getById: (id) => api.get(`/users/${id}`).then((r) => r.data),
  create: (user) => api.post('/users', user).then((r) => r.data),
  update: (id, user) => api.put(`/users/${id}`, user).then((r) => r.data),
  remove: (id) => api.delete(`/users/${id}`).then((r) => r.data)
};

Interceptors

Interceptors are hooks that run automatically on every request before it's sent, or every response before your then/catch sees it. They're perfect for cross-cutting concerns you'd otherwise repeat in every call — most commonly, attaching an auth token and handling expired sessions.

Request interceptor — attach the token

// src/services/api.js (continued)
api.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;                     // must return the config
  },
  (error) => Promise.reject(error)
);

Response interceptor — handle expired sessions

api.interceptors.response.use(
  (response) => response,              // pass successful responses through
  (error) => {
    if (error.response?.status === 401) {
      // Token invalid or expired — force a fresh login
      localStorage.removeItem('token');
      window.location.href = '/login';
    }
    return Promise.reject(error);      // let the caller still see the error
  }
);

Cancelling Requests

Cancellation matters more than beginners expect. Imagine a search box firing a request per keystroke: responses can arrive out of order, so a slow response for "re" might land after "react", overwriting the newer results with stale ones. Cancelling the previous request prevents this race — and prevents React from trying to update an unmounted component.

The modern, standard approach is the browser's AbortController (Axios's old CancelToken is deprecated):

const controller = new AbortController();

api.get('/users/search', {
  params: { q: 'react' },
  signal: controller.signal          // link the request to the controller
});

// Later — cancel it
controller.abort();

Inside a React effect, this pattern belongs in the cleanup function so a new search (or an unmount) cancels the previous request:

import { useState, useEffect } from 'react';
import axios from 'axios';
import api from '../services/api';

function SearchResults({ query }) {
  const [results, setResults] = useState([]);

  useEffect(() => {
    if (!query.trim()) {
      setResults([]);
      return;
    }
    const controller = new AbortController();

    api
      .get('/search', { params: { q: query }, signal: controller.signal })
      .then((res) => setResults(res.data))
      .catch((err) => {
        // Ignore the error that cancellation itself throws
        if (!axios.isCancel(err) && err.name !== 'CanceledError') {
          console.error(err);
        }
      });

    // Cleanup: cancel the in-flight request on the next run or unmount
    return () => controller.abort();
  }, [query]);

  return (
    <ul>
      {results.map((r) => (
        <li key={r.id}>{r.name}</li>
      ))}
    </ul>
  );
}

A Custom useFetch Hook

The loading/error/data trio shows up in every component that fetches. Extract it into a custom hook once and reuse it everywhere — cancellation included.

// src/hooks/useFetch.js
import { useState, useEffect } from 'react';
import axios from 'axios';
import api from '../services/api';

export function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const controller = new AbortController();
    setLoading(true);
    setError(null);

    api
      .get(url, { signal: controller.signal })
      .then((res) => setData(res.data))
      .catch((err) => {
        if (!axios.isCancel(err) && err.name !== 'CanceledError') {
          setError(err.response?.data?.message || err.message);
        }
      })
      .finally(() => setLoading(false));

    return () => controller.abort();
  }, [url]);

  return { data, loading, error };
}

Components become dramatically shorter — they describe the UI, not the plumbing:

// src/components/UserList.jsx
import { useFetch } from '../hooks/useFetch';

export default function UserList() {
  const { data: users, loading, error } = useFetch('/users');

  if (loading) return <p>Loading users…</p>;
  if (error) return <p role="alert">Error: {error}</p>;

  return (
    <ul>
      {users.map((u) => (
        <li key={u.id}>{u.name} ({u.email})</li>
      ))}
    </ul>
  );
}

Hands-on: Debounced Search

// src/components/Search.jsx
import { useState, useEffect } from 'react';
import axios from 'axios';
import api from '../services/api';

export default function Search() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  useEffect(() => {
    if (!query.trim()) {
      setResults([]);
      return;
    }
    const controller = new AbortController();

    const timer = setTimeout(async () => {
      setLoading(true);
      setError('');
      try {
        const res = await api.get('/search', {
          params: { q: query },
          signal: controller.signal
        });
        setResults(res.data);
      } catch (err) {
        if (!axios.isCancel(err) && err.name !== 'CanceledError') {
          setError('Search failed');
        }
      } finally {
        setLoading(false);
      }
    }, 400);

    return () => {
      clearTimeout(timer);        // cancel the pending debounce
      controller.abort();         // cancel the in-flight request
    };
  }, [query]);

  return (
    <div>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search…"
      />
      {loading && <p>Searching…</p>}
      {error && <p role="alert">{error}</p>}
      <ul>
        {results.map((r) => (
          <li key={r.id}>{r.name}</li>
        ))}
      </ul>
    </div>
  );
}

Summary & Quiz

📚 Further Reading

• Axios documentation
• MDN — AbortController
• TanStack Query (React Query)
• React — useEffect and cleanup

🚀 What's Next?

You can now move data cleanly between React and a server. Next we combine everything into a complete feature: Authentication Flow in the MERN Stack — JWTs, protected routes, token storage, and refresh.