Simple tip to better handle asynchronous data fetching operations in JavaScript

Here’s a simple tip to handle async await calls in JS — use try and catch. Let me illustrate.

async function loadData(){
  let fetchedData = await fetch('https://example.dev');
  renderData(fetchedData);
  // everything else ----
}

Do you see the problem ?
This does not handle the condition where the API call fails, as a result the renderData() function and anything after it is not called, causing the rest of the code to be broken.

Here’s the fix.

async function loadData() {
  try {
    const fetchedData = await fetch('https://example.dev');
    renderData(fetchedData);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
  // everything else ----
}

Thanks, hope it helps :)