nonobie — Real dev skills, explained like a friend would

What is Asynchronous JavaScript?

So far, all your code has been synchronous — each line runs, finishes, and then the next line starts. But the web is inherently asynchronous: fetching data from a server, waiting for a timer, reading a file — these operations take time and shouldn't block the of your code.

javascript

// Synchronous (blocks until done)
console.log("Start");
const result = heavyComputation(); // Takes 5 seconds — everything waits!
console.log("End"); // Runs after 5 seconds
 
// Asynchronous (doesn't block)
console.log("Start");
fetch("https://api.example.com/data") // Starts, doesn't wait
  .then(data => console.log("Data received"));
console.log("End"); // Runs immediately, data arrives later

Output ():

plaintext

Start
End
Data received    ← arrives when server responds

The Problem: Blocking vs Non-Blocking

javascript

// Imagine you're at a restaurant:
 
// Synchronous (blocking)
// You order food. The waiter stands at your table until the food is ready.
// No other customers can be served during this time.
 
// Asynchronous (non-blocking)
// You order food. The waiter gives the order to the kitchen and serves other tables.
// When your food is ready, the waiter brings it to you.

On the web: If fetching data from an blocked the browser, the page would freeze. No scrolling, no clicking, no typing. Async prevents this.

Callbacks (The Old Way)

A callback is a function passed to another function to run later:

javascript

function fetchData(callback) {
  setTimeout(() => {
    const data = { id: 1, name: "Alice" };
    callback(data);
  }, 1000);
}
 
console.log("

Problem: Callback Hell

javascript

getUser(id, (user) => {
  getPosts(user.id, (posts) => {
    getComments(posts[0].id, (comments) => {
      // Nesting keeps growing — code becomes unreadable!

This is why Promises were created.

Promises

A represents a value that may be available now, later, or never.

javascript

// Creating a Promise
const myPromise = new Promise((resolve, reject) => {
  const success = true;
  
  setTimeout(() => {
    if (success) {
      resolve("✅ Operation succeeded!

Promise States

plaintext

Pending ──→ Fulfilled (resolve called)
Pending ──→ Rejected (reject called)
Pending ──→ Settled (either fulfilled or rejected)

Once settled, a Promise can't change . A Promise is not lazy — it starts executing as soon as it's created.

The Fetch API

fetch() is the modern way to make HTTP requests in . It returns a Promise.

javascript

// GET request
fetch("https://api.github.com/users/octocat")
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

Common HTTP Methods

javascript

// GET — Fetch data
fetch("https://api.example.com/users");
 
// POST — Create data
fetch("https://api.example.com/users", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON

Async/Await

async/await is syntactic sugar over Promises — it makes async code read like synchronous code.

javascript

// Promise-based
function getData() {
  fetch("https://api.example.com/data")
    .then(res => res.json())
    .then(data => console.log(data))
    .catch(err

Rules:

await can only be used inside an async function
async functions always return a Promise
Use try/catch for error handling with async/await

Multiple Async Operations

Sequential (one after another — slower)

javascript

async function getSequential() {
  const user = await fetch("/api/user").then(r => r.json());
  const posts = await fetch(`/api/user/${user.id}/posts`).

Parallel (all at once — faster)

javascript

async function getParallel() {
  const [user, products, notifications] = await Promise.all([
    fetch("/api/user").then(r => r.json()),
    fetch("/api/products

Promise.race (first one wins)

javascript

async function getFastest() {
  const result = await Promise.race([
    fetch("https://api1.example.com/data"),
    fetch("https://api2.example.com/data"),
  ]);
  return result.json();
}

Promise.allSettled (all results, even failures)

javascript

const results = await Promise.allSettled([
  fetch("/api/endpoint1"),
  fetch("/api/endpoint2"),
  fetch("/api/endpoint3"),
]);
 
results.forEach(r => {
  if

Real-World Example: GitHub User & Repos

javascript

async function getGithubProfile(username) {
  try {
    // Fetch user and repos in parallel
    const [userResponse, reposResponse] = await Promise.all([
      fetch(`https://api.github.com/users/${username}`),
      fetch(`https://api.github.com/users/${

Common Mistakes

Mistake 1: Forgetting to await

javascript

// ❌ Wrong (returns a Promise, not the data)
function fetchUser(id) {
  const response = fetch(`/api/users/${id}`); // Promise!
  return response.json(); // Error: response.json doesn't exist on Promise
}
 
//

Mistake 2: Not checking response.ok

javascript

// ❌ Wrong (404 response doesn't throw — it's still a valid HTTP response)
const response = await fetch("/api/nonexistent");
const data = await response.json(); // Might be error HTML, not JSON
 
// ✅ Right
const response = await fetch("

Mistake 3: Sequential when you could parallel

javascript

// ❌ Slow (sequential)
const user = await fetchUser();
const products = await fetchProducts();
const posts = await fetchPosts();
 
// ✅ Fast (parallel)
const [user, products, posts] =

Mistake 4: Not catching errors

javascript

// ❌ Unhandled rejection (crashes)
async function load() {
  const data = await fetch("/api/data");
}
 
// ✅ Handle errors
async function load() {
  try {
    const data = await fetch("/api/data

What You've Learned

✅ Synchronous = blocking; Asynchronous = non-blocking
✅ Callbacks: functions passed to run later (old way)
✅ Promises: .then(), .catch(), .finally()
✅ Fetch: modern HTTP requests returning Promises
✅ Async/await: cleaner syntax over Promises
✅ Error handling: try/catch with async/await
✅ Parallel: Promise.all, Promise.race, Promise.allSettled

What's Next?

Chapter 13: Manipulation — selecting elements, events, modifying the page
Chapter 14: Error Handling — try/catch, custom errors, debugging
Chapter 15: Modules & Tooling — ES modules, bundlers, npm

Async JavaScript — Promises, Fetch & Async/Await

What is Asynchronous JavaScript?

The Problem: Blocking vs Non-Blocking

Callbacks (The Old Way)

Promises

Promise States

The Fetch API

Common HTTP Methods

Async/Await

Multiple Async Operations

Sequential (one after another — slower)

Parallel (all at once — faster)

Promise.race (first one wins)

Promise.allSettled (all results, even failures)

Real-World Example: GitHub User & Repos

Common Mistakes

What You've Learned

What's Next?