Building Reusable API Utility Functions with Axios

nextreact

26 October 2024

In modern web development, working with APIs is a crucial part of creating dynamic, data-driven applications. To simplify and standardize API interactions, it's a common practice to create reusable functions for different HTTP methods. In this guide, we'll go through how to set up a set of utility functions for making GET, POST, PUT, DELETE, and PATCH requests using Axios, a popular JavaScript library for HTTP requests.

Why Use Axios?

Axios is a versatile HTTP client for JavaScript that simplifies API requests and responses. Its promise-based design makes handling asynchronous operations straightforward, while automatic JSON parsing and serialization reduce manual work. Compatible with both browser and Node.js environments, Axios supports custom headers for authentication and configuration needs. Additionally, its built-in error handling ensures consistent responses, making it easier for developers to manage unexpected issues. These features collectively make Axios an excellent choice for building robust web applications.

The Code (TypeScript)

Below is our final set of utility functions, where each function represents a specific HTTP request type. These are flexible and reusable for any project using Axios.

Code

import axios, { AxiosRequestConfig } from 'axios';

export async function apiGet(endpoint: string, params = {}, additionalHeaders = {}) {
  try {
    const response = await axios.get(endpoint, {
      params,
      headers: {
        'Content-Type': 'application/json',
        ...additionalHeaders,
      },
    });
    return response.data;
  } catch (error) {
    console.error('API GET Error:', error);
    throw error;
  }
}

export async function apiPost(endpoint: string, body: any, isFormData = false, additionalHeaders = {}) {
  try {
    const headers = {
      'Content-Type': isFormData ? 'multipart/form-data' : 'application/json',
      ...additionalHeaders,
    };

    const response = await axios.post(endpoint, isFormData ? body : JSON.stringify(body), { headers });
    return response.data;
  } catch (error) {
    console.error('API POST Error:', error);
    throw error;
  }
}

export async function apiPut(endpoint: string, body: any, additionalHeaders = {}) {
  try {
    const response = await axios.put(endpoint, JSON.stringify(body), {
      headers: {
        'Content-Type': 'application/json',
        ...additionalHeaders,
      },
    });
    return response.data;
  } catch (error) {
    console.error('API PUT Error:', error);
    throw error;
  }
}

export async function apiDelete(endpoint: string, body: any, additionalHeaders = {}) {
  try {
    const response = await axios.delete(endpoint, {
      headers: {
        'Content-Type': 'application/json',
        ...additionalHeaders,
      },
      data: JSON.stringify(body),
    });
    return { success: true };
  } catch (error) {
    console.error('API DELETE Error:', error);
    throw error;
  }
}

export async function apiPatch(endpoint: string, body: any, isFormData = false, additionalHeaders = {}) {
  try {
    const headers = {
      'Content-Type': isFormData ? 'multipart/form-data' : 'application/json',
      ...additionalHeaders,
    };

    const response = await axios.patch(endpoint, isFormData ? body : JSON.stringify(body), { headers });
    return response.data;
  } catch (error) {
    console.error('API PATCH Error:', error);
    throw error;
  }
}

The Code (JavaScript)

Below is our final set of utility functions, where each function represents a specific HTTP request type. These are flexible and reusable for any project using Axios.

Code

import axios from 'axios';

export async function apiGet(endpoint, params = {}, additionalHeaders = {}) {
  try {
    const response = await axios.get(endpoint, {
      params,
      headers: {
        'Content-Type': 'application/json',
        ...additionalHeaders,
      },
    });
    return response.data;
  } catch (error) {
    console.error('API GET Error:', error);
    throw error;
  }
}

export async function apiPost(endpoint, body, isFormData = false, additionalHeaders = {}) {
  try {
    const headers = {
      'Content-Type': isFormData ? 'multipart/form-data' : 'application/json',
      ...additionalHeaders,
    };

    const response = await axios.post(endpoint, isFormData ? body : JSON.stringify(body), { headers });
    return response.data;
  } catch (error) {
    console.error('API POST Error:', error);
    throw error;
  }
}

export async function apiPut(endpoint, body, additionalHeaders = {}) {
  try {
    const response = await axios.put(endpoint, JSON.stringify(body), {
      headers: {
        'Content-Type': 'application/json',
        ...additionalHeaders,
      },
    });
    return response.data;
  } catch (error) {
    console.error('API PUT Error:', error);
    throw error;
  }
}

export async function apiDelete(endpoint, body, additionalHeaders = {}) {
  try {
    const response = await axios.delete(endpoint, {
      headers: {
        'Content-Type': 'application/json',
        ...additionalHeaders,
      },
      data: JSON.stringify(body),
    });
    return { success: true };
  } catch (error) {
    console.error('API DELETE Error:', error);
    throw error;
  }
}

export async function apiPatch(endpoint, body, isFormData = false, additionalHeaders = {}) {
  try {
    const headers = {
      'Content-Type': isFormData ? 'multipart/form-data' : 'application/json',
      ...additionalHeaders,
    };

    const response = await axios.patch(endpoint, isFormData ? body : JSON.stringify(body), { headers });
    return response.data;
  } catch (error) {
    console.error('API PATCH Error:', error);
    throw error;
  }
}

Using These Functions

Here’s a quick example of how you might use these functions:

Code

// Example: Fetch data with GET
try {
  const data = await apiGet('https://api.example.com/users', { page: 1 });
  console.log(data);
} catch (error) {
  console.error('Error fetching users:', error);
}

// Example: Create a new user with POST
try {
  const newUser = { name: 'John Doe', email: 'johndoe@example.com' };
  const data = await apiPost('https://api.example.com/users', newUser);
  console.log(data);
} catch (error) {
  console.error('Error creating user:', error);
}

Conclusion

Creating a set of reusable API functions like this can streamline your code, improve error handling, and make it easier to handle various API requests consistently. With just a few lines of code, you’re now equipped to manage your API calls efficiently and flexibly across different projects.