flexpath-async-programming-with-js-exercises

Exercise overview

The intention of this exercise is to give you more experience managing asynchronous operations in the browser using JavaScript.

Getting Started

1. Using Visual Studio Code, open the folder flexpath-async-programming-with-js-exercises wherever you saved it on your device.

2. Then open the flexpath-async-programming-with-js-exercises/exercise folder. Inside is a file named index.html. Open this file in your web browser using the methods shown in flexpath-html-and-css-in-depth-exercises.

3. You will write your JavaScript code in exercise.js. Any time you make a change, save the file and then refresh the webpage displaying your .html web page in the browser.

   We have included a video js-async-web.mp4 showing how to do this.

   Exercise instructions are provided to you as code comments in the exercise.js file.

VIDEO DISCLAIMER - You will need to clone the repo to your local device before you can watch the .mp4 file since GitHub does not support watching it from here.

Exercise solutions are in the /solution folder

 

Summary of JavaScript Concepts Covered in These Exercises

1. Asynchronous Programming:

   • Understanding the differences between synchronous and asynchronous code execution.
   • Working with callbacks and the challenges they present, such as the callback pyramid of doom.

2. Promises:

   • Creating and using Promises in JavaScript.
   • Promise states: pending, fulfilled, and rejected.
   • Consuming promises using then, catch, and finally methods.
   • Chaining multiple promises for sequential execution.
   • Handling errors and understanding how promises handle rejected states.
   • Using Promise-based libraries like Axios.

3. Async/Await:

   • Simplifying asynchronous code using the async and await keywords.
   • Error handling in async functions using try-catch blocks.
   • Using async/await for sequential and parallel API requests.
   • Combining promises and async/await for more complex asynchronous flows.

4. Advanced Promise Methods:

   • Promise.all: Running multiple promises concurrently and waiting for all to complete.
   • Promise.allSettled: Handling all promises and capturing both resolved and rejected outcomes.
   • Promise.any: Returning the first resolved promise and handling multiple sources of data.
   • Promise.race: Handling the first settled promise, whether fulfilled or rejected.

5. HTTP Requests:

   • Making HTTP requests using XMLHttpRequest and Fetch API.
   • Handling and configuring HTTP headers and status codes.
   • Using AbortController to cancel requests.
   • Understanding CORS and preflight requests.

---