notes on async/await fCC workshop

notes.md

//step-1

In this workshop, you will practice working with the async and await methods by refactoring the fCC Authors Page app you built in a prior workshop.

Recall that in order to use the await operator to wait for a function that returns a Promise, you need to wrap the function call in an async function.

An example of an async function declaration is:

const functionName = async () => {}

Start by wrapping the fetch statement and the entire sequence of chained then and catch methods as a whole in a new asynchronous function called initialFetch which takes no arguments.

// Seed code will be the whole final app code from fcc Authors Page and editable region as below:

--fcc-editable-region--

fetch('https://cdn.freecodecamp.org/curriculum/news-author-page/authors.json')
  .then((res) => res.json())
  .then((data) => {
    authorDataArr = data;
    displayAuthors(authorDataArr.slice(startingIndex, endingIndex));  
  })
  .catch((err) => {
   authorContainer.innerHTML = '<p class="error-msg">There was an error loading the authors</p>';
  });

--fcc-editable-region--

// We are expecting people to do this:

  const initialFetch = async () => {
    fetch('https://cdn.freecodecamp.org/curriculum/news-author-page/authors.json')
      .then((res) => res.json())
      .then((data) => {
        authorDataArr = data;
        displayAuthors(authorDataArr.slice(startingIndex, endingIndex));  
      })
      .catch((err) => {
      authorContainer.innerHTML = '<p class="error-msg">There was an error loading the authors</p>';
      });
  }

// things to check for in the tests include:

• the fetch statement should be unchanged in its entirety
• we need to be able to call a function called initialFetch successfully
• it should be an async function (the hints should suggest where to place the word async?)

// step-2

When calling an asynchronous function, you can either await the function's return or you can let it run asynchronously. If you had any code that depends on the initialFetch data being returned, you would want to await the function call, but since you don't have any such dependancy, you can go ahead and just call the function asynchronously.

Add a function call to initialFetch.

--fcc-editable-region--

loadMoreBtn.addEventListener('click', fetchMoreAuthors);
--fcc-editable-region--

// We expect people to write:

initialFetch();
loadMoreBtn.addEventListener('click', fetchMoreAuthors);

// things to check for in the tests include:

• a new call to initialFetch is added
• new initalFetch call should be above the addEventListener line although it could also be below?

// step-3

At this point, the behaviour of the app should not have changed. The code still fetches a file from the CDN and then processes the retrieved data into JSON. Once that's done, it saves that data into the authorDataArr variable and then calls displayAuthors.

Change the code to replace the line that has res.json() so that it uses the await operator instead of the then method. Here's an example of how to write that:

Given this code:

  .then((res) => res.json());

You would write:

   await res.json();

Then, store the result of this statement in authorDataArr, and move the line of code that calls displayAuthors so it is immediately following your new await statement. Finally, delete the remaining then statement and its code block as it no longer serves any purpose.

You will notice a SyntaxError in the console at this point. The next step will deal with refactoring the catch method to resolve this error.

--fcc-editable-region--
  .then((res) => res.json())
  .then((data) => {
    authorDataArr = data;
    displayAuthors(authorDataArr.slice(startingIndex, endingIndex));  
  })
--fcc-editable-region--

// We expect people to write:

    authorDataArr = await res.json();
    displayAuthors(authorDataArr.slice(startingIndex, endingIndex));

// things to check for in the tests include:

• no then methods remain
• authorDataArr value should be as expected
• displayAuthors should be called

// step-4

At this point, you need to deal with the catch method. First, nest the lines of code within initialFetch into a try block. Then, modify the catch method accordingly.

Recall that a try and catch block should look like this:

try {
  // code that can cause throw an error goes in this block
} catch (error) {
  // error handling code here
}

If you've done this correctly, the SyntaxError will be resolved and the app should function normally.

--fcc-editable-region--

    const res = await fetch(
      "https://cdn.freecodecamp.org/curriculum/news-author-page/authors.json",
    );
    authorDataArr = await res.json();
    displayAuthors(authorDataArr.slice(startingIndex, endingIndex));
    
    .catch((err) => {
     authorContainer.innerHTML = '<p class="error-msg">There was an error loading the authors</p>';
    });
    
--fcc-editable-region--

// We expect people to write:

  try {
    const res = await fetch(
      "https://cdn.freecodecamp.org/curriculum/news-author-page/authors.json",
    );
    authorDataArr = await res.json();
    displayAuthors(authorDataArr.slice(startingIndex, endingIndex));
  } catch (err) {
    authorContainer.innerHTML =
      '<p class="error-msg">There was an error loading the authors</p>';
  }

// things to check for in the tests include:

• try catch block exists
• authorContainer line should be unchanged and part of the catch block
• three statements in the try block unchanged from the seed