flexpath-network-requests-with-js-exercises

Exercise overview

The intention of this exercise is to give you more experience creating and managing network requests in the browser using JavaScript.

Getting Started

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

2. Then open the flexpath-network-requests-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-network-exercises.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. HTTP Requests:

   • Fundamentals of HTTP requests, including methods (GET, POST) and status codes (200, 404, 500).
   • Understanding HTTP headers and how to set them.
   • Content negotiation using headers like Content-Type and Accept.

2. Fetch API:

   • Making HTTP requests using the Fetch API.
   • Handling JSON and text responses.
   • Using promise-based APIs to handle asynchronous requests.
   • Configuring Fetch with options like method, headers, and body.
   • Using JSON.stringify to send data as JSON.

3. Error Handling:

   • Using try-catch blocks to handle errors thrown by Fetch.
   • Checking HTTP status codes to handle client and server errors.
   • Handling malformed data and ensuring robust error handling mechanisms.

4. AbortController:

   • Using AbortController to cancel long-running HTTP requests.
   • Understanding how signals work to abort Fetch requests.

5. ReadableStream and Data Streaming:

   • Using ReadableStream to handle large data streams.
   • Tracking download progress and updating the UI accordingly.

6. Cross-Origin Resource Sharing (CORS):

   • Understanding CORS and the restrictions it imposes.
   • Configuring servers to handle CORS requests.
   • Preflight requests for methods like POST and handling OPTIONS requests.

7. Session Management and UI Updates:

   • Interacting with the DOM to update UI elements based on HTTP responses.
   • Handling shopping cart functionality and updating session data.

8. Using External Libraries:

   • Mention of using libraries like Axios for making HTTP requests.

---