JavaScript uses callbacks, promises, and async/await to handle asynchronous operations; 1. Callbacks are the oldest method but lead to "callback hell" and inversion of control issues; 2. Promises improve readability and error handling with .then() and .catch() chains; 3. Async/await, built on promises, provides a clean, synchronous-like syntax using await inside async functions and try/catch for errors; today, async/await is the recommended approach for new code due to its clarity and maintainability, while callbacks should be avoided except in legacy contexts.

JavaScript has long been single-threaded and non-blocking, which means it can’t afford to wait around for slow operations like fetching data from a server. To handle this, JavaScript evolved several patterns for dealing with asynchronous operations: callbacks, promises, and async/await. If you’ve ever been confused about when or why to use each, you’re not alone. Let’s break them down in a practical, modern context.

Callbacks: The Original Way (and the "Callback Hell")

Callbacks are functions passed as arguments to other functions, to be executed after a task completes.

function fetchData(callback) {
  setTimeout(() => {
    callback('Data fetched!');
  }, 1000);
}

fetchData((result) => {
  console.log(result); // "Data fetched!" after 1 second
});

This works fine for simple cases, but problems arise when you have multiple async operations:

fetchData((data1) => {
  processData(data1, (data2) => {
    saveData(data2, (data3) => {
      console.log('All done:', data3);
    });
  });
});

This nesting is known as "callback hell" — hard to read, debug, and maintain.

? Key issue: Inversion of control. You’re handing your logic over to another function and trusting it to call your callback correctly — and only once.

Promises: A Better Way to Chain Async Logic

Promises solve many callback problems by representing a future value. A promise can be pending, fulfilled, or rejected.

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data fetched!');
    }, 1000);
  });
}

fetchData()
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.error('Something went wrong:', error);
  });

Now you can chain operations cleanly:

fetchData()
  .then(processData)
  .then(saveData)
  .then(finalResult => console.log('Done:', finalResult))
  .catch(err => console.error(err));

? Benefits:

• Avoids deep nesting
• Centralized error handling with .catch()
• You control the flow instead of handing it off

But .then().then().catch() syntax can still feel clunky, especially with complex logic.

Async/Await: Writing Async Code That Looks Sync

async/await is built on top of promises and lets you write asynchronous code like it’s synchronous — without blocking the thread.

async function handleData() {
  try {
    const data1 = await fetchData();
    const data2 = await processData(data1);
    const data3 = await saveData(data2);
    console.log('Done:', data3);
  } catch (error) {
    console.error('Error:', error);
  }
}

handleData();

Here’s what’s happening:

• async functions always return a promise
• await pauses execution until the promise resolves (but doesn’t block the thread!)
• Use try/catch for error handling, just like sync code

? Pro tip: You can await any promise — including fetch(), setTimeout (with a wrapper), or your own custom async functions.

You can even run operations in parallel:

async function loadAll() {
  const [result1, result2] = await Promise.all([
    fetch('/api/user'),
    fetch('/api/posts')
  ]);
  return { result1, result2 };
}

So, Which Should You Use Today?

• ? Callbacks: Avoid in new code unless working with legacy APIs. They’re error-prone and hard to scale.
• ? Promises: Great for simple chains or when you can’t use async/await (e.g., top-level code in older environments).
• ?? Async/Await: The modern standard. Use it in almost all new async code — it’s cleaner, easier to debug, and more readable.

?? Remember: await only works inside async functions. So you can’t use it directly in .map() or .forEach() unless the callback is async.

Final Thoughts

The evolution from callbacks → promises → async/await reflects JavaScript’s growth into a robust language for complex applications. While you’ll still encounter callbacks in older code or Node.js APIs, modern JavaScript favors async/await for clarity and maintainability.

Understanding how they all work together — that async/await is just syntactic sugar over promises, and promises replaced the pitfalls of callbacks — gives you the power to read, debug, and write better async code.

Basically, just use async/await unless you have a reason not to. And now you know why it works.

The above is the detailed content of Modern JavaScript: Demystifying Async/Await, Promises, and Callbacks. For more information, please follow other related articles on the PHP Chinese website!