How can I handle timeouts in Axios and Fetch?

How can I handle timeouts in Axios and Fetch?

You can handle timeouts in Axios by setting the timeout property in the config object. For Fetch, you can use the AbortController.

Can you show me an example of how to implement a timeout in Axios?

Sure! Here's a simple example:

import axios from 'axios';

const fetchData = async () => {
  try {
    const response = await axios.get('https://api.example.com/data', { timeout: 5000 });
    console.log(response.data);
  } catch (error) {
    if (error.code === 'ECONNABORTED') {
      console.error('Request timed out');
    } else {
      console.error('Error fetching data:', error.message);
    }
  }
};

What about using Fetch? How do I set a timeout there?

For Fetch, you can use AbortController like this:

const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000);

fetch('https://api.example.com/data', { signal: controller.signal })
  .then(response => response.json())
  .then(data => {
    clearTimeout(timeoutId);
    console.log(data);
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      console.error('Request timed out');
    } else {
      console.error('Error fetching data:', error.message);
    }
  });