From Callbacks to Async/Await: Mastering JavaScript Asynchronous Programming

Understanding Callbacks

JavaScript functions can be passed as arguments, allowing later execution when an event occurs. The article starts with a simple add function and shows how assigning the function to different variables still calls the same code. It then demonstrates typical callback usage with jQuery $.getJSON and highlights the problem of callback hell when callbacks are nested.

function add(x, y) {
  return x + y;
}
const me = add;
const you = add;
me(2, 3); // 5

Promises – A Better Abstraction

A Promise represents an asynchronous operation that can be pending , fulfilled , or rejected . It is created with new Promise((resolve, reject) => { … }). The resolve function moves the promise to fulfilled , while reject moves it to rejected . Consumers attach handlers with .then() and .catch().

const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Success!'), 2000);
});

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

Promises also support chaining , where each .then() returns a new promise, allowing sequential asynchronous steps without deep nesting.

function getPromise() {
  return new Promise(resolve => setTimeout(resolve, 2000));
}

getPromise()
  .then(() => console.log('A'))
  .then(() => console.log('B'))
  .then(() => { throw new Error('Oops'); })
  .catch(() => console.log('Error!'));

Refactoring Callback Code with Promises

The article rewrites a multi‑step AJAX flow (fetch GitHub user, then fetch weather) using promises. getUser(id) returns a promise that resolves with the user data, and getWeather(user) returns a promise that resolves with weather information. The click handler becomes a clear sequence of .then() calls.

function getUser(id) {
  return new Promise((resolve, reject) => {
    $.getJSON({
      url: `https://api.github.com/users/${id}`,
      success: resolve,
      error: reject
    });
  });
}

function getWeather(user) {
  return new Promise((resolve, reject) => {
    $.getJSON({
      url: getLocationURL(user.location),
      success: data => resolve({user, weather: data.query.results}),
      error: reject
    });
  });
}

$('#btn').on('click', () => {
  getUser('tylermcginnis')
    .then(getWeather)
    .then(data => updateUI(data))
    .catch(showError);
});

Async/Await – Synchronous‑Style Asynchrony

Marking a function with async makes it return a promise automatically. Inside an async function, the await keyword pauses execution until the awaited promise settles, allowing code that looks synchronous.

$('#btn').on('click', async () => {
  try {
    const user = await getUser('tylermcginnis');
    const weather = await getWeather(user.location);
    updateUI({user, weather});
  } catch (e) {
    showError(e);
  }
});

Because await can only be used inside async functions, attempting it elsewhere results in a syntax error. The article also notes that an async function without an explicit return still resolves to undefined wrapped in a promise.

Error Handling

With promises, errors are caught using .catch(). With async/await, a try…catch block provides the same capability, keeping error handling close to the code that may fail.

async function fetchData() {
  try {
    const data = await fetch('/api/data').then(r => r.json());
    return data;
  } catch (err) {
    console.error('Fetch failed', err);
    throw err; // re‑throw if needed
  }
}

Overall, the article demonstrates how moving from callbacks to promises and finally to async/await improves readability, reduces callback hell, and aligns asynchronous code with natural, sequential thinking.