JavaScript Async/Await Explained: From Callbacks to Clean Code

Introduction

JavaScript often has to wait — for a network request, a file, or a timer. The old way to handle waiting was nested callbacks, which quickly became hard to read. Promises improved that. Async/await makes it read almost like normal, top-to-bottom code.

If you understand promises and one keyword pair, async and await, you can write most asynchronous JavaScript you will need day to day.

The basic pattern

A function marked async always returns a promise. Inside it, await pauses that function until a promise settles, without blocking the rest of the program.

async function getUser(userId) {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/users/${userId}`
  );
  const user = await response.json();
  return user;
}
getUser(1).then((user) => console.log(user.name));

Read it like normal code: fetch the user, wait for the JSON, return the user. The await lines are where the waiting happens, and they are easy to spot.

Handling errors with try/catch

Without error handling, a failed request becomes an unhandled promise rejection. Wrap awaited calls in try/catch, just like synchronous code.

async function getUserSafely(userId) {
  try {
    const response = await fetch(
      `https://jsonplaceholder.typicode.com/users/${userId}`
    );
    if (!response.ok) {
      throw new Error(`Request failed: ${response.status}`);
    }
    return await response.json();
  } catch (error) {
    console.error("Could not load user:", error.message);
    return null;
  }
}

Two habits matter here. First, check response.ok, because fetch only rejects on a network failure, not on a 404 or 500. Second, return a safe fallback, like null, so the caller can handle the missing data cleanly.

Sequential vs parallel

Awaiting in a loop runs tasks one after another. That is correct when one task depends on the previous one, but slow when the tasks are independent.

// Sequential: second request waits for the first
const user1 = await getUser(1);
const user2 = await getUser(2);
// Parallel: both start at once, then wait for both
const [userA, userB] = await Promise.all([getUser(1), getUser(2)]);

Use Promise.all when the tasks do not depend on each other. Note that if any promise in Promise.all rejects, the whole thing rejects, so handle errors for the group, not just for one item.

Common beginner mistakes

  • Forgetting await, then wondering why a variable holds a promise instead of data.
  • Using await inside a normal function instead of an async function.
  • Awaiting inside a loop when the tasks are independent — use Promise.all instead.
  • Forgetting error handling, so one failed request crashes the flow silently.

Takeaway

Mark the function async, await the promises you need, handle errors with try/catch, and use Promise.all for independent work. That covers most real async code, without callback nesting.

Comments

Post a Comment

Popular posts from this blog

SQL Joins Explained: INNER, LEFT, RIGHT, and FULL, With Examples

Introduction Most real data lives in more than one table. Users live in one table, orders in another, and the link between them is usually an ID, like user_id . A join combines rows from two tables based on that link, so you can ask questions like "show me each order, with the name of the person who placed it." There are four joins you need first. They differ only in which rows they keep when there is no match. The example tables -- users -- id | name -- 1 | Ali -- 2 | Sara -- 3 | Omar -- orders -- id | user_id | item -- 1 | 1 | Keyboard -- 2 | 1 | Mouse -- 3 | 2 | Monitor Ali has two orders, Sara has one, Omar has none, and every order belongs to a user in this example. INNER JOIN — only matching rows An INNER JOIN keeps only rows that match in both tables. Omar disappears here, because he has no orders. SELECT users.name, orders.item FROM users INNER JOIN orders ON users.id = orders.user_id; Result: name | item Ali | Keyboard Ali | Mouse ...
Read more

Build Your First REST API With Node.js and Express in 30 Minutes

Introduction A REST API is a way for a frontend, a mobile app, or another service to ask your server for data, and to send data back. Node.js with Express is a good first choice for learning APIs because the setup is small and the concepts transfer to other backend frameworks. In this post, you will build a tiny users API with two routes: one to list users, and one to add a user. Step 1: Set up the project Create a folder, then run: npm init -y npm install express Add this to your package.json so you can run the server easily: { "scripts": { "start": "node index.js" } } Step 2: Create the server Create a file called index.js : const express = require("express"); const app = express(); app.use(express.json()); let users = [ { id: 1, name: "Ali" }, { id: 2, name: "Sara" }, ]; // GET /users — list all users app.get("/users", (req, res) => { res.json(users); }); // GET /users/:id — get one...
Read more

Git Branching Explained: Work Without Breaking the Main Code

Introduction A branch is a separate line of work in Git. The main branch, usually called main , holds the stable code. When you start a feature or a fix, you create a branch, work there, and merge it back only when it is ready. If the work goes wrong, the main code is untouched. This is the workflow used by almost every team, and it is worth learning early, before you need it under pressure. Create and switch branches Check your current branch first, then create and switch in one step with the modern switch command, or the older checkout command if your Git version prefers it. git status git switch -c feature/login-form # Older Git: git checkout -b feature/login-form Name branches clearly: feature/login-form , fix/header-bug , docs/readme-update . A good branch name tells the next person what the branch is for, without opening it. Work normally on the branch, then commit as usual: git add . git commit -m "Add login form layout" Merge back to main When the work is ...
Read more