Creating a Custom Axios Instance

You are currently viewing Creating a Custom Axios Instance

Creating a Custom Axios Instance

Axios is a powerful promise-based HTTP client for JavaScript that simplifies the process of making HTTP requests and handling responses. It is widely used in web development for interacting with APIs, fetching data, and handling network operations. One of the standout features of Axios is the ability to create custom instances, which allows developers to define specific configurations that can be reused across different parts of an application.

Creating a custom Axios instance is beneficial for setting default configurations such as base URLs, headers, and timeouts. It also allows for the addition of request and response interceptors, which can modify or log requests and responses. This comprehensive guide will walk you through the process of creating and using custom Axios instances, complete with full executable code examples and detailed explanations.

Understanding Axios and Custom Instances

Definition and Overview of Axios

Axios is an open-source HTTP client for JavaScript that supports making HTTP requests from both the browser and Node.js environments. It provides a clean and simple API for sending asynchronous HTTP requests and handling responses, including support for promises, interceptors, and automatic JSON transformation.

Importance of Custom Axios Instances

Custom Axios instances are crucial for managing HTTP requests more efficiently in large applications. By creating a custom instance, you can define default settings and configurations that apply to all requests made using that instance. This approach reduces redundancy, ensures consistency, and makes it easier to manage and maintain the application.

Setting Up Axios in a React Project

To get started with Axios in a React project, you need to install Axios and set up the basic configuration.

Installing Axios via npm/yarn

Using npm:

npm install axios

Using yarn:

yarn add axios

Basic Configuration of Axios

After installing Axios, you can configure it in your React project by creating a basic Axios instance.

// src/axiosConfig.js
import axios from 'axios';

const axiosInstance = axios.create();

export default axiosInstance;

In this initial configuration, we create a basic Axios instance without any specific settings. This instance will be customized further in the following sections.

Creating a Custom Axios Instance

Introduction to Custom Axios Instances

Creating a custom Axios instance involves defining specific configurations that apply to all requests made using that instance. This includes settings such as base URLs, headers, and timeouts.

Code Example: Creating a Custom Axios Instance

Here’s how to create a custom Axios instance with specific configurations:

// src/axiosConfig.js
import axios from 'axios';

// Create a custom Axios instance
const customAxiosInstance = axios.create({
  baseURL: 'https://api.example.com',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token',
  },
  timeout: 10000, // 10 seconds timeout
});

export default customAxiosInstance;

In this example, a custom Axios instance is created with a base URL, default headers, and a timeout. The baseURL ensures that all requests are made to the specified API endpoint, the headers include the Content-Type and Authorization tokens, and the timeout is set to 10 seconds.

Configuring Default Settings for Axios Instances

Introduction to Default Settings

Default settings in Axios instances allow you to define configurations that will apply to all requests made using that instance. This includes settings such as base URLs, headers, timeouts, and other options.

Code Example: Setting Base URL, Headers, and Timeout

Let’s configure default settings for a custom Axios instance:

// src/axiosConfig.js
import axios from 'axios';

// Create a custom Axios instance with default settings
const customAxiosInstance = axios.create({
  baseURL: 'https://api.example.com',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token',
  },
  timeout: 10000, // 10 seconds timeout
});

export default customAxiosInstance;

In this example, we define default settings such as the baseURL, headers, and timeout. These settings ensure that all requests made using this instance will adhere to these configurations, reducing the need for repetitive code.

Adding Interceptors to Axios Instances

Introduction to Interceptors

Interceptors in Axios allow you to run your custom code or modify the requests and responses before they are handled by then or catch. This is useful for adding authentication tokens, logging, modifying headers, or handling errors globally.

Code Example: Request and Response Interceptors

Here’s how to add request and response interceptors to a custom Axios instance:

// src/axiosConfig.js
import axios from 'axios';

// Create a custom Axios instance
const customAxiosInstance = axios.create({
  baseURL: 'https://api.example.com',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token',
  },
  timeout: 10000, // 10 seconds timeout
});

// Add a request interceptor
customAxiosInstance.interceptors.request.use(
  config => {
    console.log('Request made with config:', config);
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// Add a response interceptor
customAxiosInstance.interceptors.response.use(
  response => {
    console.log('Response received:', response);
    return response;
  },
  error => {

    if (error.response && error.response.status === 401) {
      console.error('Unauthorized access - possibly invalid token');
    }

    return Promise.reject(error);

  }

);

export default customAxiosInstance;

In this example, we add request and response interceptors to the custom Axios instance. The request interceptor logs the request configuration before the request is sent, while the response interceptor logs the response and handles unauthorized access errors globally.

Using Custom Axios Instances in Your Application

Introduction to Using Custom Instances

Using custom Axios instances in your application ensures that all requests adhere to the predefined configurations, improving code maintainability and consistency. You can import and use the custom instance in any part of your application where HTTP requests are needed.

Code Example: Making Requests with Custom Instances

Here’s how to use the custom Axios instance in your application:

// src/api/userApi.js
import customAxiosInstance from '../axiosConfig';

// Function to fetch users using the custom Axios instance
const fetchUsers = async () => {

  try {
    const response = await customAxiosInstance.get('/users');
    console.log('Fetched users:', response.data);
    return response.data;
  } catch (error) {
    console.error('Error fetching users:', error);
    throw error;
  }

};

export default fetchUsers;

In this example, the fetchUsers function uses the custom Axios instance to send a GET request to the /users endpoint. The response data is logged to the console, and any errors are caught and logged as well.

Conclusion

In this article, we explored how to create and use custom Axios instances to enhance the efficiency and maintainability of your web applications. We covered the installation and setup of Axios, creating a custom Axios instance, configuring default settings, adding interceptors, and using the custom instance in your application. By leveraging these features, you can ensure consistent configurations across all your HTTP requests and simplify your codebase.

Creating custom Axios instances provides a powerful way to manage HTTP requests in your applications. I encourage you to experiment with these configurations, create custom instances for different use cases, and implement global error handling to build more robust and maintainable applications.

Additional Resources

To continue your learning journey with Axios, here are some additional resources:

  1. Axios Documentation: The official documentation provides comprehensive information and examples. Axios Documentation
  2. JavaScript Promises: Learn more about promises and asynchronous programming in JavaScript. MDN Web Docs – Promises
  3. React Documentation: The official documentation for React provides detailed guides and tutorials. React Documentation
  4. Handling HTTP Requests: Explore more about handling HTTP requests and responses effectively. HTTP Requests Guide

By utilizing these resources, you can deepen your understanding of Axios and enhance your ability to build efficient and scalable web applications.

Leave a Reply