How to handle Axios timeouts?

However, network or server issues can cause delays or timeouts. Axios is a commonly used JavaScript library for sending requests, and it provides tools for handling timeouts effectively.

Axios timeouts

Axios is a popular JavaScript library for making HTTP requests from a web application. It provides an easy-to-use interface for sending requests to a server and handling the response.

Timeouts are an important aspect of making HTTP requests because they help ensure the application doesn't get stuck waiting for a response that may never come. Timeouts are used to set a maximum time limit for a request to receive a response, and if the response is not received within the specified time limit, the request is aborted.

Timeout Handling in Axios

Axios provides various ways to handle timeouts, depending on your use case and coding preferences. Here are common approaches:

Handling timeouts with try-catch blocks

We will set timeout option to 5000 milliseconds, or 5 seconds. This means that if the API endpoint does not respond within 5 seconds, the request will be aborted, and the error message "Request timed out" will be logged to the console.

Lets use the Jokes API by API-Ninjas from Rapid API Hub to see how we can implement this in our applications.

You should also subscribe to the Jokes API so you can easily use it.

js
Copy
const axios = require('axios');
// Make a request to the API
axios.get('https://jokes-by-api-ninjas.p.rapidapi.com/v1/jokes', {
  timeout: 5000, // Set a timeout of 5 seconds
  headers: {
    'X-RapidAPI-Key': 'your-rapid-api-key',
    'X-RapidAPI-Host': 'jokes-by-api-ninjas.p.rapidapi.com'
  }
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  if (error.code === 'ECONNABORTED') {
    console.log('Request timed out');
  } else {
    console.log(error.message);
  }
});

Using Axios interceptors

In this example, the axios.interceptors.request.use method is used to add a timeout property of 5000ms to the request configuration object. The axios.interceptors.response.use method is used to handle the timeout error in the response interceptor.

js
Copy
axios.interceptors.request.use(config => {
  config.timeout = 5000; // Wait for 5 seconds before timing out
  return config;
});
axios.interceptors.response.use(
  response => response,
  error => {
    if (error.code === 'ECONNABORTED' && error.message.includes('timeout')) {
      console.log('Request timed out');
    }
    return Promise.reject(error);
  }
);
axios.get('https://jokes-by-api-ninjas.p.rapidapi.com/v1/jokes', {
  headers: {
    'X-RapidAPI-Key': 'your-rapid-api-key',
    'X-RapidAPI-Host': 'jokes-by-api-ninjas.p.rapidapi.com'
  }
})
.then(response => console.log(response.data))
.catch(error => console.log(error));

Wrap up

Setting timeouts on requests helps prevent requests from taking too long to complete, leading to a better user experience. Additionally, using interceptors is an effective way to handle timeouts in Axios. The request interceptor allows us to set a timeout property for each request, while the response interceptor enables us to handle timeout errors in a centralized location.