Asynchronous JavaScript: Keep Your UI Alive

Jan 2026

JavaScript, Async, Fetch API

Syifa Fauziyah Arizal

JavaScript is single-threaded. If your code waits and freezes, your UI dies.

“Wait for data — but never freeze the user.”

🕰️ Sync vs Async

⏳ Synchronous

Runs line by line. No patience.

JavaScript


console.log("A");
console.log("B");
console.log("C");

Output: A → B → C

⚡ Asynchronous

Waits without blocking.

JavaScript


console.log("A");

setTimeout(() => {
  console.log("B");
}, 2000);

console.log("C");

Output: A → C → B

📞 Callback

A callback is a function called later.

JavaScript


function loadData(callback) {
  setTimeout(() => {
    callback("Data loaded");
  }, 2000);
}

loadData((result) => {
  console.log(result);
});

Works — but too many callbacks lead to callback hell.

🤝 Promise

A promise represents a value that will exist later.

pending
fulfilled
rejected

JavaScript


const getData = new Promise((resolve, reject) => {
  let success = true;

  if (success) {
    resolve("Data loaded");
  } else {
    reject("Failed to load data");
  }
});

getData
  .then(result => console.log(result))
  .catch(error => console.log(error));

Cleaner than callbacks. Still readable.

🚀 async / await

Looks synchronous. Works asynchronously.

JavaScript


async function fetchData() {
  try {
    const result = await getData;
    console.log(result);
  } catch (error) {
    console.log(error);
  }
}

This is the modern standard.

🌐 Fetch API

Fetch is how JavaScript talks to the internet.

JavaScript


fetch("https://api.example.com/data")
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.log(err));

Cleaner with async/await:

JavaScript


async function getData() {
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();
  console.log(data);
}

💬 Mini Project — Quote Generator

JavaScript


async function getQuote() {
  const res = await fetch("https://api.quotable.io/random");
  const data = await res.json();

  console.log(data.content);
}

🧑 Mini Project — Random User

JavaScript


async function getUser() {
  const res = await fetch("https://randomuser.me/api/");
  const data = await res.json();

  const user = data.results[0];
  console.log(user.name.first, user.email);
}

🪪 Mini Project — Display User Card

JavaScript


async function showUser() {
  const res = await fetch("https://randomuser.me/api/");
  const data = await res.json();
  const user = data.results[0];

  const card = document.querySelector(".card");
  card.innerHTML = `
    
    ${user.name.first} ${user.name.last}
    ${user.email}
  `;
}

JS + DOM + API = full front-end combo.

🔥 Mini Challenges

Add loading text & error handling
Button to refetch data
Filter user by gender and display it