Skip to content
ML SystemPart 2: Chapter 6
CH.06 ~25 min

Async JS

Event Loop, Promises, and Axios.

Event LoopPromisesAxios
  • Explain the mechanics of the JavaScript Event Loop.
  • Fetch data from a remote API using Axios and Promises.
  • Integrate network requests into React components using useEffect.

01 Asynchronous Execution & Event Loop Viz

Definition

Event Loop

A mechanism that allows JavaScript to perform non-blocking I/O operations by delegating heavy tasks to the browser's Web APIs.

Deeper InsightWhile the engine executes one task at a time, it delegates network requests to the system, picking up the results only when they are ready. Click to collapse

02 Promises & Axios

  • **Pending**: The network request is in progress.
  • **Fulfilled**: The request succeeded (HTTP 2xx).
  • **Rejected**: The request failed (HTTP 4xx/5xx).
useEffect for Side Effects

Data fetching is a side effect. In React, we use the useEffect hook with an empty dependency array to fetch data once when the component mounts.

Key Takeaways

  1. 1JavaScript's Event Loop enables non-blocking asynchronous operations.
  2. 2Promises have three states: Pending, Fulfilled, and Rejected.
  3. 3useEffect is the standard place to trigger API calls in React components.

CH.06

Chapter Complete

Up next:REST APIs

Chapter Progress

Reading
Exercise

Interact with the visualization

Quiz

Chapter Quiz

No quiz available for this chapter.