JavaScript Promises, Async/Await & Fetching APIs

Master asynchronous JavaScript: Event Loop, Microtask vs Macrotask queues, Promise chaining, async/await syntax, and error handling.

SLRJ Digital Engineering Verified•Topic: Asynchronous JavaScript & Network APIs

Downloadable Study GuideVerified PDF

Modern JavaScript (ES6+ to Async) Developer Guide

Format: PDF Document • Size: 5.7 KB • Pages: 2

Download PDF

Executive Overview

JavaScript is single-threaded, meaning it can only execute one command at a time. Yet it powers real-time chat, streaming media, and high-frequency API requests without freezing the user interface. It achieves this concurrency through the Event Loop and Asynchronous APIs.

1. The Single-Threaded Event Loop

The JavaScript runtime consists of a Call Stack, Web APIs (provided by the browser/Node.js), a Microtask Queue (Promises, queueMicrotask), and a Macrotask Queue (setTimeout, setInterval, I/O).

Event Loop Task Processing Priority

Call StackExecutes synchronous statements sequentially until empty

Immediate

Microtask QueueExecutes ALL Promise resolutions before rendering

High Priority

Browser RenderRepaints screen if scheduled (60Hz / 120Hz)

Display Frame

Macrotask QueuePicks ONE timer/IO callback, then cycles back to Call Stack

Normal Priority

3. Clean Async/Await Patterns

Async/await is syntactic sugar over native Promises, turning nested .then() callback chains into readable synchronous-looking code.

Production Fetch Wrapper with Timeout & Status Checks

typescript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
async function fetchLearningNotes(category: string, signal?: AbortSignal) {
  try {
    const response = await fetch(`/api/notes?category=${encodeURIComponent(category)}`, {
      method: "GET",
      headers: { "Accept": "application/json" },
      signal, // Enables cancellation if component unmounts
    });
 
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
 
    const data = await response.json();
    return { success: true, notes: data.notes };
  } catch (error: any) {
    if (error.name === "AbortError") {
      console.log("Fetch request aborted.");
      return { success: false, aborted: true };
    }
    console.error("Failed to fetch notes:", error.message);
    return { success: false, error: error.message };
  }
}

Note:Notice the error handling: fetch() does not reject on HTTP 404 or 500 status codes; you must explicitly check response.ok.

4. Concurrency: Promise.all vs allSettled

Avoid waterfall requests where independent calls wait for each other unnecessarily:

Parallel Concurrency with Promise.all

javascript

1
2
3
4
5
6
7
8
9
// SLOW WATERFALL (Total time = 300ms + 400ms = 700ms)
const user = await fetchUser();
const notes = await fetchNotes();
 
// FAST PARALLEL (Total time = max(300ms, 400ms) = 400ms)
const [user, notes] = await Promise.all([
  fetchUser(),
  fetchNotes(),
]);

Note:Promise.all executes both network operations in parallel on the browser networking layer.

Frequently Asked Questions

Q:Why doesn't fetch() throw an error on 404 Not Found?

fetch() only rejects when a network failure occurs (e.g. offline, DNS failure, CORS block). An HTTP 404 or 500 is considered a successful HTTP transaction with error status.

Knowledge Check & Practice Assignments

Reinforce what you just learned with interactive challenges.

In what order will the numbers 1, 2, 3, 4 log to the console?

Code Challenge:

console.log(1);
setTimeout(() => console.log(2), 0);
Promise.resolve().then(() => console.log(3));
console.log(4);

Previous TopicMastering CSS Flexbox & Grid Layouts Next TopicReact Components, Props & State Mastery

Related Web Development Notes

Backend & Databases

RESTful API Design & Architectural Best Practices

Learn to design scalable, secure RESTful APIs: HTTP verbs, status code conventions, JSON schemas, idempotency, and versioning.

Loading Interface...

async function fetchLearningNotes(category: string, signal?: AbortSignal) { try { const response = await fetch(`/api/notes?category=${encodeURIComponent(category)}`, { method: "GET", headers: { "Accept": "application/json" }, signal, // Enables cancellation if component unmounts }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); return { success: true, notes: data.notes }; } catch (error: any) { if (error.name === "AbortError") { console.log("Fetch request aborted."); return { success: false, aborted: true }; } console.error("Failed to fetch notes:", error.message); return { success: false, error: error.message }; } }

// SLOW WATERFALL (Total time = 300ms + 400ms = 700ms) const user = await fetchUser(); const notes = await fetchNotes(); // FAST PARALLEL (Total time = max(300ms, 400ms) = 400ms) const [user, notes] = await Promise.all([ fetchUser(), fetchNotes(), ]);