Promises Practice

Learning Goals

• Review these concepts:
  • single-threaded JS
  • asynchronous JS
  • event loop

• Utilize Postman as a tool for making requests to APIs

• Utilize fetch to get data from an API and utilize the data in a FE app

Warm Up

In your journal, write your answers to the following questions. It is totally OK (and encouraged!) to look back at the notes you took yesterday!

• What is the difference between synchronous and asynchronous JS?
• What are the different statuses of a Promise?
• What is returned when we use the fetch API?

What We Will Be Building

— –>

Promises Practice Repo

We’re going to be building out this site with two different repos. One for the client side code and another is an API that serves up a collection of members. Something to note is that the API given to us doesn’t automatically give us all of the info needed to display the staff members. There is a second nested endpoint we will need to fetch… More on this in a moment.

Clone this repo and the promises-api repo down.

Have these directories open in two separate terminal tabs so you can see them both at the same time. For both, run:

npm install

npm start

Postman

Postman is a great tool for making requests to an API and seeing the response you get back in a quick, easy-to-use interface! We will be utilizing this tool throughout Mod 3 and beyond!

Download the app now and get it running now!

Getting Started

Since we are going to be getting our data from an API, it’s usually a good idea to get a sense of what our responses look like when we make a request to a certain endpoint!

As you may be starting to see, there is a lot of data available to us but it is going to be a little tricky to access this data. We are going to work together to break down how to access this data to get our app running.

Step 1 - Getting the Initial Bio Info

Before we can get any of the detailed info for each staff member, we have to start at the initial endpoint as our “entry” into the rest of the dataset. We will be utilizing the fetch API to access this data!

If you’re not feeling totally comfortable with fetch yet, I suggest taking a five minutes to review the docs.

OK, so let’s start by making our initial fetch request and seeing what we get back. See if you can…

• Use fetch within componentDidMount() to make a request to http://localhost:3001/api/frontend-staff
• console.log the data that comes back!

componentDidMount() {
  fetch('http://localhost:3001/api/frontend-staff')
    //fetch returns another Promise, which resolves to a Response object
    //We can call .json() on the Response object to access the data from
    //the body of the Response object
    //.json() returns another Promise, which is why we need to chain
    //a .then to allow it to resolve!
    .then(response => response.json())
    .then(staffData => {
      //let's check what the data even looks like...
      console.log('all data', staffData);
      console.log('bio data', staffData.bio);
    })
}

Step 2 - Accessing the bio Data

OK, so it looks like we want to dig into the .bio from the data that gets returned after we run the .json() method on our initial response object! But, now we have multiple API endpoints that house the data we are really after… woof.

Great! We have a plan! Plans are #tite. Let’s work on getting the first two steps implemented.

componentDidMount() {
  fetch('http://localhost:3001/api/frontend-staff')
    .then(response => response.json())
    .then(staffData => {
      //let's just see what we are getting back!
        const promises = staffData.bio.map(staffMember => {
          return fetch(staffMember.info)
            .then(res => res.json())
        })
      console.log('promises', promises);
    })
}

Alrighty then… We are getting a little bit closer to grabbing all of the data we need. But we still have a little work to do.

Step 3 - Getting the Data We Need

So we have access to two new pieces of data from this fetch - the bio and image. But we still need to have all of the relevant info for each staff member, especially their name!

componentDidMount() {
  fetch('http://localhost:3001/api/frontend-staff')
    .then(response => response.json())
    .then(staffData => {
        const promises = staffData.bio.map(staffMember => {
          return fetch(staffMember.info)
            .then(res => response.json())
            //after we have pulled the data off the response...
            .then(info => {
              //create an object with the name
              return {
                name: staffMember.name,
                //and the remaining info (bio + image)
                ...info
                //bio: info.bio,
                //image: info.image
              }
            })
        })
      console.log('promises', promises);
    })
}

Hell yeah! We now have the data looking how we want. But the problem is, it’s still a Promise and we can’t work with it yet. Consarnit! And worst of all, now we have this giant array of Promises - how on earth are we going to resolve all of them?!

Step 4 - Resolving ALL of the Promises!

Dope! So now we have a way to work with all of the Promises returned from our .map! But before we implement it, let’s check the docs and make sure we understand what we are getting back from this solution!

componentDidMount() {
  fetch('http://localhost:3001/api/frontend-staff')
    .then(response => response.json())
    .then(staffData => {
        const promises = staffData.bio.map(staffMember => {
          return fetch(staffMember.info)
            .then(res => res.json())
            .then(info => {
              return {
                name: staffMember.name,
                ...info
              }
            })
        })
        //this will return us a single Promise!
        //If it returns a Promise, we need to use .then
        //to give it time to resolve!
        return Promise.all(promises)
    })
    //We can now set the workable data to our state!
    .then(staff => this.setState({ staff }))
}

Step 5 - Building a Helpers File

Bravo! - we have successfully integrated the nested data from the API into our App’s state! But, this is a pretty burly chunk of code and isn’t super readable. This is where you might find it more beneficial to break this into a separate file and bring in the functionality only when you need it!

// helpers.js
export const fetchStaffBios = staffData => {
  const promises = staffData.bio.map(staffMember => {
    return fetch(staffMember.info)
      .then(res => res.json())
      .then(info => {
        return {
          name: staffMember.name,
          ...info
        }
      })
  })
  return Promise.all(promises)
}

// App,js
class App extends Component {
  constructor() {
    super();
    this.state = {
      staff: [],
      error: ''
    };
  }

  componentDidMount() {
    fetch('http://localhost:3001/api/frontend-staff')
      .then(response => response.json())
      .then(staffData => fetchStaffBios(staffData))
      .then(staff => this.setState({ staff }))
      .catch(error => this.setState({ error }))
  }

  render() {
    //JSX
  }
}

Resources

• MDN docs
• Loupe, by Philip Roberts, was used for examples.
• DAN MARTENSEN
• Promises, Async/Await