🚀 Boost Your Axios Skills: Master API Requests Like a Pro! 🌐✨

Axios, a popular HTTP client library, simplifies API calls in JavaScript applications, especially in React. While its basic usage is straightforward, modern techniques can significantly enhance its capabilities, particularly for scalability, maintainability, and performance.

Setting Up Axios in ReactJS

To start using Axios, install it in your React project:

npm install axios

Here’s a simple example to fetch data:

import axios from 'axios';
import { useEffect, useState } from 'react';
function App() {
 const [data, setData] = useState(null);
useEffect(() => {
 axios.get('https://jsonplaceholder.typicode.com/posts')
 .then(response => setData(response.data))
 .catch(error => console.error(error));
 }, []);
return (
 <div>
 {data ? data.map(item => <p key={item.id}>{item.title}</p>) : 'Loading…'}
 </div>
 );
}
export default App;

Modern Enhancements

Let’s explore advanced Axios techniques to modernize your React applications.

1. Axios Instances

Create reusable Axios instances to manage base URLs and default headers:

import axios from 'axios';
const apiClient = axios.create({
 baseURL: 'https://api.example.com',
 timeout: 1000,
 headers: { 'Authorization': 'Bearer your-token' }
});
export default apiClient;
Usage:
import apiClient from './apiClient';
apiClient.get('/users')
 .then(response => console.log(response.data));

2. Interceptors for Request and Response

Interceptors let you handle requests and responses globally:

apiClient.interceptors.request.use(config => {
 // Add auth token to headers dynamically
 config.headers['Authorization'] = `Bearer ${localStorage.getItem('token')}`;
 return config;
}, error => {
 return Promise.reject(error);
});
apiClient.interceptors.response.use(response => {
 return response;
}, error => {
 if (error.response.status === 401) {
 // Handle unauthorized access
 console.error('Unauthorized');
 }
 return Promise.reject(error);
});

3. Custom Hooks with Axios

Encapsulate Axios logic into reusable hooks:

import { useState, useEffect } from 'react';
import apiClient from './apiClient';
function useFetch(url) {
 const [data, setData] = useState(null);
 const [error, setError] = useState(null);
 const [loading, setLoading] = useState(true);
useEffect(() => {
 apiClient.get(url)
 .then(response => setData(response.data))
 .catch(error => setError(error))
 .finally(() => setLoading(false));
 }, [url]);
return { data, error, loading };
}
export default useFetch;
Usage:
function Users() {
 const { data, error, loading } = useFetch('/users');
if (loading) return <p>Loading…</p>;
 if (error) return <p>Error: {error.message}</p>;
return (
 <ul>
 {data.map(user => <li key={user.id}>{user.name}</li>)}
 </ul>
 );
}

4. Handling Cancellations

Prevent memory leaks by cancelling Axios requests when a component unmounts:

import { useEffect, useState } from 'react';
import axios from 'axios';
function App() {
 const [data, setData] = useState(null);
useEffect(() => {
 const source = axios.CancelToken.source();
axios.get('https://jsonplaceholder.typicode.com/posts', {
 cancelToken: source.token
 })
 .then(response => setData(response.data))
 .catch(error => {
 if (axios.isCancel(error)) {
 console.log('Request canceled:', error.message);
 } else {
 console.error(error);
 }
 });
return () => source.cancel('Component unmounted');
 }, []);
return (
 <div>
 {data ? data.map(item => <p key={item.id}>{item.title}</p>) : 'Loading…'}
 </div>
 );
}
export default App;

5. Error Handling with Context Providers

Centralize error handling using React Context:

import { createContext, useContext, useState } from 'react';
const ErrorContext = createContext();
export function ErrorProvider({ children }) {
 const [error, setError] = useState(null);
return (
 <ErrorContext.Provider value={{ error, setError }}>
 {children}
 {error && <div className="error">{error}</div>}
 </ErrorContext.Provider>
 );
}
export function useError() {
 return useContext(ErrorContext);
}

Usage:

import apiClient from './apiClient';
import { useError } from './ErrorProvider';
function App() {
 const { setError } = useError();
useEffect(() => {
 apiClient.get('/data')
 .catch(err => setError(err.message));
 }, [setError]);
return <div>Check the error context!</div>;
}

Conclusion

By leveraging modern Axios techniques such as interceptors, custom hooks, cancellation, and context-based error handling, you can create more robust and maintainable React applications. Try integrating these patterns into your projects to experience the benefits firsthand!