Week 15: Fetch API

Week	Topic	Learning Objectives	Key Resources
15	Fetch API	Students will be able to explain the fetch API structure including get and post aspects; implement a fetch request by handling the data returned via async/await while accounting for any errors that may happen during the request. Complete the portfolio part and begin their Open API part of their final project.	Week 15 Slides TBD

Overview

JSON

• JSON (JavaScript Object Notation) is a standardized format for structuring data
• Based on JavaScript object syntax
• Commonly used for transmitting data on the web

Working with APIs

• APIs (Application Programming Interfaces) are servers created for serving data for external use
• Accessed through URLs with specific query parameters
• API keys are often required for authentication and tracking usage
• Securing API keys is important to prevent abuse and unnecessary costs

Fetching Data

• Older method: XMLHttpRequest (complex and verbose)
• Modern method: fetch (simpler and cleaner syntax)
• Example using the Giphy API:
  1. Sign up for a free API key
  2. Construct the API URL with the key and search term
  3. Use fetch with the URL and handle the response with .then() and .catch()
  4. Extract the desired data from the response object
• CORS (Cross-Origin Resource Sharing) restrictions and the {mode: 'cors'} option

Async and Await

• async and await keywords make asynchronous code more readable
• async declares an asynchronous function, which always returns a promise
• await pauses the function execution until a promise is resolved or rejected
• Error handling with try/catch blocks inside async functions
• Practice converting promise-based code to async/await syntax

Fetch API

• Built-in browser function for making HTTP requests
• Uses promises to handle asynchronous requests and responses
• Two parameters: url (required) and options (optional)
  • options include: method, headers, body
• Returns a promise that resolves to a Response object
• Handling successful and failed responses with response.ok and throw new Error()
• Parsing JSON data with response.json()

Guidance for Mentors

Potential trouble spots for students:

• Incorrect API URL or missing GitHub username in the API URL
• Difficulty understanding the structure of the returned JSON data and accessing the desired properties
• Forgetting to parse the JSON response before accessing the data
• Confusion with chaining multiple .then() methods and handling the response in each step
• Issues with DOM selection and appending elements to the project list
• Creating a sub-repository by cloning the open API project repository inside the portfolio folder
• Struggling to understand the API documentation and determining the required parameters or authentication methods
• Forgetting to handle errors using the .catch() method
• Mixing up the order of git add, git commit, and git push commands

Assignment Rubric

Lesson 15 Assignment Rubric - Portfolio Completion

GitHub Repository Setup

• Merged previous lesson-14 pull request into main branch
• Created new lesson-15 branch from updated main branch

Fetch API

• Created a "GET" request to https://api.github.com/users/{GITHUB_USERNAME}/repos using the Fetch API
• Chained a .then() method to the fetch call to return the response JSON data
• Chained another .then() method to parse the response and store it in a variable named repositories
• Console logged the value of repositories to view the returned data

Error Handling

• Chained a .catch() function to the fetch call to handle errors from the server

Display Repositories

• Created a variable projectSection to select the projects section by id using DOM selection
• Created a variable projectList to select the <ul> element within projectSection using DOM selection
• Created a for loop to iterate over the repositories array
• Inside the loop, created a variable project to create a new <li> element
• Set the inner text of project to the current array element's name property
• Appended the project element to the projectList element

Git and GitHub

• Staged changes using git add
• Committed changes with a meaningful commit message using git commit
• Pushed changes to the GitHub repository using git push
• Created a pull request for the lesson-15 branch

Lesson 15 Assignment Rubric - Open API Project

Project Setup

• Familiarized with the documentation of the chosen API
• Created a new repository in GitHub for the open API project
• Connected the repository to the local machine
• Created basic files (index.html, index.js, index.css) with correct linking
• Tested the API fetch and logged the response to the console

Git and GitHub

• Staged changes using git add
• Committed changes with a meaningful commit message using git commit
• Pushed changes to the GitHub repository using git push