How can I handle timeouts in Fetch and Axios?

How can I handle timeouts in Fetch and Axios?

In Fetch, you can use the AbortController to handle timeouts. For Axios, you can set a timeout option in the config.

Can you show me an example of using AbortController with Fetch?

Sure! Here's a simple example:

const controller = new AbortController();
const signal = controller.signal;

setTimeout(() => controller.abort(), 5000); // 5 seconds timeout

fetch('https://api.example.com/data', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Fetch aborted due to timeout');
    } else {
      console.error('Fetch error:', error);
    }
  });

What about setting a timeout in Axios?

In Axios, you can set a timeout like this:

axios.get('https://api.example.com/data', { timeout: 5000 }) // 5 seconds timeout
  .then(response => console.log(response.data))
  .catch(error => {
    if (error.code === 'ECONNABORTED') {
      console.log('Request timed out');
    } else {
      console.error('Axios error:', error);
    }
  });