promises-and-ajax.md

Promises and Ajax Instructor Notes

Objectives

• Describe what a promise is, and why it is useful
• Use a promise to manage async behavior
• Chain promises to determine the order of async actions
• Return Promises from functions
• Handle Errors using .catch

Setup

• Access this Repl.it (https://repl.it/@rogerschmidt/ProductiveShorttermServicepack)
• Clone repo, install and start (https://github.com/rogerwschmidt/pizza-toppings-frontend)
• URL (this is the server we are going to be communication with) https://immense-lake-82822.herokuapp.com/

What is a promise?, and why it is useful?

• With your table, answer the following question
  • What are promises?
  • Why are they useful?

Use a promise to manage async behavior

• In the repl.it
  • Make a prediction in which order thinkgs will print out
  • Make 2 new questions for the magic 8 ball
  • What are the different parts of each 'question' and 'answer'?
• In the Pizza Toppings repo
  • Investigate the web site
    • What actions can you do in the webpage?
  • Investigate the code
    • What code runs when the webpage first runs?
    • What does the renderToppings function take as an argument?
    • What does the renderToppings function do with the data it receives?
    • In the renderToppings there a events added to each list item, why are the events added?
    • Where are the toppins stored, and how is the data interacted with?
  • In main.js, update the code so that the initial render of data uses toppings from the server.

How do you chain promises to determine the order of async actions?

• In the repl.it
  • Ask 2 questions from the 8 ball in a row
  • Ask 3 qquestions
• In the Pizza Toppings repo
  • In main.js, update the code to add a topping such that it talks with the server
  • Chain the retrieval of data after adding it to the server.

How do you return a promise from a function?

• In the repl.it
  • Create and invoke a function that returns a magic8BallPromise that asks 'Will there be free food today?'
  • How do you get the resulsts of the promise
• In the Pizza Toppings repo
  • In toppings.js, return a promise from getToppings that retreives all the toppings form the server
  • In main.js, refactor the initial fetch of toppings to use getToppings()
  • In toppings.js, return a promise from addTopping
  • In main.js. refactor adding a new topping to use the addToping, and chain it to getToppings
  • Refactor deleteTopping and updateTopping to return promises, and refactor their code where appropriate. Chain any promises that need to happen in a certain order

How do you handle errors in a promise using .catch?

• In the repl.it
  • What happens when you ask a question without a question mark at the end?
  • Use catch to handle the error
  • Chain three promises with a .catch at the end. What happens when the first question does not have a question mark? Second? Third?
• In the Pizza Toppings repo
  • Open up the browswer console and try to create an error. The best way to do that would be to try to delete or update something that is no longer there. Work with a neighbor to trigger and error
  • Add .catch to the delete and update functionality that alerts the user when something went wrong