How To Handle Async/Await Errors in Javascript

Some developers are still new to async/await in Javascript. If you’re used to callbacks or using .then to get the value of a promise, async/await can be a bit of a black box, especially when it comes to errors.

The most straightforward and recommended way to handle errors is using try/catch. This will allow you to catch errors if your async function rejects or throws an error.

async function getProducts() {
  try {
    const response = await fetch('/products');
    const products = await response.json();
  } catch(err) {
    console.error(err);
  }
}

If you had a function which handles API requests, you could do something like this:

async function request(endpoint) {
    const response = await fetch(endpoint);
    return response.json();
}

async function getProducts() {
  try {
      const products = await request('/products);
  } catch (err) {
    console.error(err);
  }
}

You can even make the request method shorter by doing this:

async function request(endpoint) {
	return (await fetch(endpoint)).json();
}

My preference when working with promises is to always use async/await and break my logic for fetching content into separate functions. I tend to exclusively work with native Fetch these days and find breaking up my code makes it easier to work with.