Async JS and Rest APIs

Shopping Cart Challenge Review🔗

Everyone is eligible for a gift card for tims or starbucks!

• To get a gift card, send your code in the appropriate drop box in d2l
• Then as teams, each group will present their code and walk through their logic with the class
• Mini Presentations should address the following content (each person needs to talk about at least 1 part of how the code works):
  • demonstrate the interface
  • walk through your code (pick 1 person’s code to use, if there are multiple solutions, address the variations in approach as necessary)
  • identify major challenges that you ran into and how you worked through them

Error Handling Review🔗

• try / catch statements
  • attempt to run code and handle an error if it fails
• throw new Error()
  • create custom error messages
• console.error()
  • output more useful error messages

Example Syntax of all 3 methods used together

let a = "1";
let b = 2;

function add(numOne, numTwo) {
  try {
    if (typeof numOne !== "number" || typeof numTwo !== "number") {
      throw new Error("at least one of the input values is not a number");
    } else {
      return a + b;
    }
  } catch (err) {
    console.error(err);
  }
}
// execute the function
add(a, b);
// Expected output-- Error: at least one of the input values is not a number

1. REST API🔗

• Explanatory Video
  • REpresentational State Transfer
  • Request Types:
    • Get Request: for retrieving data
    • Post Request: for sending data
    • Put Request: To replace data (update)
    • Delete Request: to remove data (destructive)
• CRUD Operations are used to interact with a rest api, rest api’s serve data
  • Create = Get
  • Retrieve = POST
  • Update = PUT
  • Delete = Delete
• Using a tool like Postman, you can test endpoints and work on constructing queries
  • these queries can be used in your apps to handle server fetch calls
  • a major task when working on this is to put together fetches that are performant by only fetching as much data as is needed

Activity: Use the VsCode Postman Plugin to fetch from an api

• Disney API
• Postman VSCode Extension
• Disney API Documentation

Tasks

• fetch all characters
• fetch a single character

2. Async Javascript🔗

• Used for functions that may take a long time such as fetching data from an api `fetch()
• Allows processes to happen while the async function is running
• There are different syntaxes that have been used over time.
  • Promises where promises are chained together is a recent method
  • however the modern and the clearest way to write asynchronous code is with async/await syntax
  • async/await

Syntax Example

async function fetchDataFromApi(url) {
  try {
    const response = fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP Error. Status: ${response.status}`);
    }
    const data = await response.json();
    return data;
  } catch (e) {
    console.error(e);
  }
}

Challenges working with Async Code

• Because they return promises that data will be there you can’t use the data fetched the same as a static variable
• Callback Hell: this is difficult to read code from nesting too many callbacks (an older issue that was addressed first with Promise syntax)
• Promise Confusion: this happens with the .then, .catch, and .finally parts of javascript’s promise syntax. These methods are strung together to handle async code and can be challenging to work with at first
• Debugging: this is hard with async code because it doesn’t work linearly.

Activity🔗

In your scrum groups, create fetch calls to your choice of public api’s. There are lots out there, this list will get you started.

• Pick 1-3 api’s to fetch data from (stick with Disney if you want more practice there)
• First craft fetch calls with postman, use the documentation for your api to figure out how to write the fetch
• Then recreate your fetch in a javascript file and log the data
• Then see if you can render the data to an html page
• Make sure to catch errors
• Finally, migrate your code to Nuxt and use the useFetch composable in /server/api/apiFile.js to fetch data