<aside> 👉 A brief intro to async/await using promises as a starting point

</aside>

Original fetch & promises workshop

Learn Fetch & Promises

Adapted from Challenge 4, using promises

function fetchPokemon() {
  fetch("<https://pokeapi.co/api/v2/pokemon/pikachu>")
    .then((response) => response.json())
    .then((pikachu) => console.log(pikachu))
    .catch((error) => console.log(error));
}

fetchPokemon();

Refactored, using async/await

async function fetchPokemon() {
  try {
    const response = await fetch("<https://pokeapi.co/api/v2/pokemon/pikachu>");
    const pikachu = await response.json();
    console.log(pikachu);
  } catch (error) { console.error(error); }
}

fetchPokemon();

What's Happening in Each Snippet?

Original Snippet (Using Promises):

• The function fetchPokemon starts a task to get data from a web address (in this case, information about Pikachu from an API).
• It waits for the data to arrive, and when it does, it transforms this data into a format (JSON) that JavaScript can easily work with.
• If there is an error (like a network issue), it catches that error and prints it out.
• This is done using .then() for handling the data and .catch() for catching errors.

Refactored Snippet (Using Async/Await):

• The function fetchPokemon does the same task as before, but the way it's written is different.
• async tells JavaScript that this function is special because it waits for some tasks to complete.
• await is used to wait for the data to arrive, and it automatically handles the transformation to JSON format.
• Errors are caught using try/catch, which is like saying, "try to do this, but if there's an error, catch it and do something else (like print the error)."

Differences Between the Snippets:

1. Syntax and Readability:
   • The Promises version uses .then() and .catch(), which chain together but can get a bit complex and harder to read, especially with multiple steps.
   • The async/await version uses a more straightforward approach, making the code look more like a series of simple steps. It's often easier to read and understand.