Using Axios for Error Handling in API Calls

Using Axios for Error Handling in API Calls body { font-family: sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; } header { background-color: #333; color: #fff; padding: 20px; text-align: center; } main { max-width: 800px; margin: 20px auto; padding: 20px; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } h1, h2, h3 { color: #333; } p { line-height: 1.6; } code { background-color: #222; color: #fff; padding: 5px 10px; font-family: monospace; display: block; margin-top: 10px; margin-bottom: 10px; } .highlight { background-color: #f7f7f7; padding: 5px 10px; border-radius: 5px; } .error { color: #f00; }

Using Axios for Error Handling in API Calls

Introduction

Axios is a popular JavaScript library for making HTTP requests. It simplifies the process of fetching data from APIs and provides features for managing errors effectively. In this blog post, we will explore how to handle errors gracefully when making API requests with Axios.

Common Error Scenarios

When working with APIs, various error scenarios can occur, including:

Network Errors: Issues with network connectivity can prevent requests from reaching the server.
Server Errors: The server might return an error response indicating an issue on its end.
API Rate Limiting: Exceeding the allowed number of API requests can lead to rate limiting errors.
Invalid Input: Providing incorrect data or invalid parameters can result in errors.

Error Handling with Axios

Axios provides built-in error handling mechanisms that allow you to intercept and manage errors in a structured way. Let's look at some common techniques:

Using the `catch` Block

The `catch` block is a fundamental error handling mechanism in JavaScript. You can use it to catch errors thrown by Axios during the request process:


        axios.get('https://api.example.com/data')
            .then(response => {
                // Handle success response
            })
            .catch(error => {
                // Handle error
                console.error(error);
            });

Error Handling with Interceptors

Axios allows you to create global interceptors that run before or after each request. This is useful for implementing centralized error handling logic:


        // Global error interceptor
        axios.interceptors.response.use(
            response => response,
            error => {
                // Handle global error
                console.error(error);
                return Promise.reject(error);
            }
        );

        // Make API request
        axios.get('https://api.example.com/data')
            .then(response => {
                // Handle success response
            })
            .catch(error => {
                // Handle specific error
            });

Handling Specific Error Types

You can check the error object's properties to determine the type of error that occurred:


        axios.get('https://api.example.com/data')
            .then(response => {
                // Handle success response
            })
            .catch(error => {
                if (error.response) {
                    // Server error
                    console.error(error.response.data);
                    console.error(error.response.status);
                    console.error(error.response.headers);
                } else if (error.request) {
                    // Network error
                    console.error('Network error: ', error.request);
                } else {
                    // General error
                    console.error('General error: ', error.message);
                }
            });

Custom Error Handling

You can create custom error objects to provide more context or to handle specific error scenarios:


        class ApiError extends Error {
            constructor(message, status, data) {
                super(message);
                this.status = status;
                this.data = data;
            }
        }

        axios.get('https://api.example.com/data')
            .then(response => {
                // Handle success response
            })
            .catch(error => {
                if (error.response) {
                    throw new ApiError(
                        `API Error: ${error.response.status}`,
                        error.response.status,
                        error.response.data
                    );
                } else {
                    throw error;
                }
            })
            .catch(error => {
                // Handle ApiError instances
                if (error instanceof ApiError) {
                    console.error(error.message);
                    console.error('Status:', error.status);
                    console.error('Data:', error.data);
                } else {
                    console.error(error);
                }
            });

Conclusion

Proper error handling is crucial for building robust and reliable applications that can gracefully handle unexpected situations. Axios provides a comprehensive set of tools for managing errors, allowing you to create applications that are resilient and user-friendly.

Back to Blogs