How can I handle fetch errors in React?

How can I handle fetch errors in React?

You can handle fetch errors in React by using try-catch blocks or by checking the response status.

Can you show me an example of using try-catch?

Sure! Here's a simple example:

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Fetch error:', error);
  }
}

What about using .catch with fetch?

You can also use the .catch method with fetch like this:

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Fetch error:', error));