Resume

Fetch Function in JavaScript

Overview:

• Explored the role and functionality of the Fetch function in JavaScript.
• Understood the concept of single-threaded execution and asynchronous JavaScript.

Key Learnings:

1. Fetch Functionality:

   • Used to make server requests and retrieve JSON data.
   • A facade function allowing access to browser APIs from JavaScript.

2. Asynchronous JavaScript:

   • JavaScript, being single-threaded, can handle asynchronous operations by delegating tasks.
   • Compared JavaScript's single-threaded execution to a post office clerk processing multiple tasks.

3. Practical Implementation:

   • Demonstrated a real-world example of Fetch usage.
   • Accessed user data from a third-party web-based API (randomuser.me).
   • Used the Fetch API to retrieve and log JSON data asynchronously.

Implementation Details:

• Local HTML and JavaScript Setup:

  • Utilized a local HTML file with a script tag referencing a JavaScript file (script.js).
  • Used the Live Server VS Code extension to serve files locally.

• JavaScript Code Execution:

  • Initiated with a console.log displaying "another customer approaching".
  • Invoked the Fetch API to fetch user data asynchronously.
  • Continued executing subsequent code without waiting for Fetch API to complete.
  • Received and logged the fetched JSON data to the console.

Conclusion:

• Gained insight into the Fetch function's role in retrieving data from the web.
• Acquired foundational knowledge essential for data fetching in React.

Next Steps:

• Apply the Fetch function concept in fetching data within React, as an upcoming topic in the course.