v5 Week 12: Asynchronous Programming and Promises

Week	Topic	Learning Objectives	Key Resources
12	Asynchronous Programming and Promises	Students will be able to identify the characteristics of asynchronous programming and define promises and how to work with them.	Week 12 Slides TBD

Overview

Callbacks

• A function passed into another function as an argument
• Invoked inside the outer function to complete a routine or action
• Example: addEventListener takes a callback function to handle events
• Can lead to "Callback Hell" when chaining multiple callbacks

Promises

• An object that represents a value that may be available in the future
• Helps solve issues with asynchronous code execution
• States: Pending, Fulfilled, Rejected
• Creation: new Promise((resolve, reject) => { ... })
• Handling: .then() for fulfilled promises, .catch() for rejected promises

Synchronous vs. Asynchronous Code

• Synchronous: Executes one instruction at a time, in order
• Asynchronous: Executes multiple instructions simultaneously, order of completion unknown
• Asynchronous code is non-blocking, allowing other code to execute while it finishes

Promise Methods

• .then(): Accepts a callback function called when the promise is fulfilled
  • Receives the resolved value as an argument
• .catch(): Handles errors or rejected promises
  • Receives the rejection reason (error) as an argument
• Promises can be chained using .then() and .catch() methods

Creating and Using Promises

• Create a new promise: const myPromise = new Promise((resolve, reject) => { ... })
• Simulating asynchronous tasks with setTimeout, resolve, and reject
• Using .then() to handle resolved promises and .catch() to handle errors

Guidance for Mentors

Potential trouble spots for students:

• Understanding the concept of asynchronous execution and how it differs from synchronous code
• Grasping the purpose and usage of callbacks, especially when dealing with complex nested callbacks (Callback Hell)
• Comprehending the states of a promise (Pending, Fulfilled, Rejected) and how they relate to the flow of asynchronous operations
• Distinguishing between .then() and .catch() methods and when to use each one
• Chaining multiple .then() methods and understanding how to pass data between them
• Handling errors properly within promises and using .catch() effectively
• Remembering to return promises from .then() callbacks to ensure proper chaining
• Mixing up synchronous and asynchronous code, leading to unexpected behavior or race conditions

Assignment Rubric

Repository Setup

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

Message Form

• Added an empty <section> element above the <footer> element in index.html
• Created a level-two heading with the text "Leave a Message" inside the new <section> element
• Created an HTML <form> element with the name attribute "leave_message"
• Added the following inside the <form> element:
  • <input> element with type "text", name "usersName", and required true
  • <input> element with type "email", name "usersEmail", and required true
  • <textarea> element with name "usersMessage" and required true
  • <button> element with the text "Submit" and type attribute equal to "submit"
• Added corresponding <label> elements for each form field

Message List Section

• Created a new <section> element with an id of "messages" after the form section
• Added a level-two heading with the text "Messages" inside the new section
• Added an empty unordered list (<ul>) element after the heading

Handle Message Form Submit

• Created a variable named messageForm that selects the "leave_message" form by name attribute
• Added an event listener to the messageForm element that handles the "submit" event
• Inside the callback function, created three variables to retrieve the values from the form fields
• Added a console.log statement to log the three variables
• Prevented the default refreshing behavior of the "submit" event using preventDefault
• Cleared the form using the reset method

Display Messages in List

• Created a variable named messageSection that selects the "#messages" section by id
• Created a variable named messageList that selects the <ul> element within messageSection
• Created a variable named newMessage that creates a new <li> element
• Set the inner HTML of newMessage with the following:
  • <a> element that displays the "usersName" and is a clickable link to the "usersEmail"
  • <span> element that displays the "usersMessage"
• Created a variable named removeButton that creates a new <button> element
  • Set the inner text to "remove" and the type attribute to "button"
  • Added an event listener to handle the "click" event
    • Inside the callback function, created a variable named entry that finds the button's parent element
    • Removed the entry element from the DOM
• Appended the removeButton to the newMessage element
• Appended the newMessage to the messageList 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-14 branch

Stretch Goals (Optional)

• Hid the "#messages" section, including the "Messages" header, when the list is empty
• Created an "edit" button for each message entry that allows the user to input a new/modified message