Learn JavaScript - Promises, async/await, and Asynchronous Error Handling

#Introduction

Waiting code — fetch, setTimeout, file reads — has appeared in several episodes, but never been dissected. Episode 16 answers the question that was always deferred: how does JavaScript handle work whose result only becomes available later? The answer is the Promise, with async/await as the modern way to write it.

Promises emerged to solve the callback hell problem: code nested too deeply because every step waits for the previous step. Promises flatten that chain, and async/await makes it read like ordinary synchronous code.

This episode is the foundation for every real application — reading APIs, writing files, talking to databases. Master the Promise states, the .then and .catch chain, async/await, then Promise.all for parallel execution.

#Promises and Their States

#What Is a Promise

A Promise is an object representing the result of an asynchronous operation that hasn't finished yet. It has three states:

• pending: the operation is still running.
• fulfilled: the operation succeeded with a result value.
• rejected: the operation failed with an error reason.

Creating a Promise

const janji = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Berhasil diproses");
  }, 1000);
});
 
janji.then((hasil) => {
  console.log(hasil);
});

new Promise((resolve, reject) => accepts an executor function. resolve marks success and reject marks failure. Here resolve("Berhasil diproses") is called after one second, and janji.then(...) receives its value. A Promise only changes state once — from pending to fulfilled or rejected.

#Reject and the Difference from Sync Errors

If an operation fails, call reject. Note: an error inside a Promise is not visible to a regular try...catch outside it — because the Promise runs asynchronously:

A failing Promise

const cek = new Promise((resolve, reject) => {
  const sukses = false;
  setTimeout(() => {
    if (sukses) {
      resolve("OK");
    } else {
      reject(new Error("Terjadi kegagalan"));
    }
  }, 500);
});
 
cek.catch((error) => {
  console.error("Ditangkap:", error.message);
});

reject(new Error("Terjadi kegagalan")) switches the Promise to the rejected state. cek.catch(...) catches it. Async errors can only be caught via .catch, not by a synchronous try...catch placed outside the Promise.

#.then and .catch Chains

#Arranging Sequential Steps

.then can be chained: each .then receives the value from the previous .then and returns a new value — including another Promise that will be awaited:

A .then chain

function dapatkanPengguna() {
  return new Promise((resolve) => {
    setTimeout(() => resolve({ id: 1, nama: "Arman" }), 300);
  });
}
 
function dapatkanPosting(user) {
  return new Promise((resolve) => {
    setTimeout(() => resolve([`Posting dari ${user.nama}`]), 300);
  });
}
 
dapatkanPengguna()
  .then((user) => dapatkanPosting(user))
  .then((posting) => console.log(posting))
  .catch((error) => console.error(error));

.then((user) => dapatkanPosting(user)) returns a new Promise that the next .then awaits — this is how you arrange sequential steps without nesting. The .catch at the end catches errors from all previous steps. One .catch at the end of a chain is far cleaner than many per-step handlers.

#async/await

#Writing Asynchronous Like Synchronous

async marks a function that always returns a Promise, and await pauses execution until the Promise settles:

async and await

async function prosesLengkap() {
  const user = await dapatkanPengguna();
  const posting = await dapatkanPosting(user);
  return posting;
}
 
const hasil = await prosesLengkap();
console.log(hasil);

await dapatkanPengguna() pauses prosesLengkap until the Promise settles, then passes its value on. The result is the same as a .then chain, but it reads like synchronous top-to-bottom code — whereas .then chains nest deeper as steps grow. await is only legal inside an async function.

#Promise.all and Error Handling

#Parallel Execution with Promise.all

Sequential await wastes time when several Promises don't depend on each other. Promise.all runs them all in parallel and waits for all of them to settle:

Promise.all for parallel execution

async function muatDataParalel() {
  const [pengguna, posting, komentar] = await Promise.all([
    fetch("https://jsonplaceholder.typicode.com/users/1").then((r) => r.json()),
    fetch("https://jsonplaceholder.typicode.com/posts/1").then((r) => r.json()),
    fetch("https://jsonplaceholder.typicode.com/comments/1").then((r) => r.json()),
  ]);
 
  return { pengguna, posting, komentar };
}
 
const data = await muatDataParalel();
console.log(data.pengguna.name);

Promise.all([...]) accepts an array of Promises and returns a single Promise that settles with a results array in the same order. The three fetch calls run simultaneously, not sequentially. If any one fails, Promise.all rejects immediately — the other results aren't returned.

#Async Error Handling Patterns

With async/await, errors are caught with a regular try...catch:

try catch on an async function

async function aman() {
  try {
    const respons = await fetch("https://jsonplaceholder.typicode.com/posts/1");
    if (!respons.ok) {
      throw new Error(`HTTP ${respons.status}`);
    }
    return await respons.json();
  } catch (error) {
    console.error("Gagal memuat data:", error.message);
    return { title: "Fallback" };
  }
}
 
console.log(await aman());

try wraps the operations that could fail; catch (error) catches errors from await, including those thrown by throw inside the try. Returning a fallback value in catch keeps the function producing data the interface can use — a common production pattern.

#Wrap-Up

Episode 16 completed your understanding of asynchrony: Promise states moving from pending to fulfilled or rejected, .then and .catch chains that flatten nested callbacks, the async/await syntax that makes code read sequentially, and Promise.all for parallel execution with a clean try...catch.

Key takeaways:

• A Promise has three states: pending, fulfilled, and rejected.
• .catch catches async errors; a plain try...catch can't reach into a Promise.
• async always returns a Promise; await pauses until it settles.
• async/await is more readable than .then chains for sequential steps.
• Promise.all runs independent Promises in parallel.
• Handle async/await errors with try...catch and provide a fallback.

In the next episode 17 we'll cover form validation and user interaction — validating input with HTML5 and custom JavaScript, showing clear error messages, and processing form submission asynchronously. You'll build reliable, user-friendly forms.