MSDN Documentation

Why Asynchronous JavaScript?

Imagine fetching data from a server. If this operation were synchronous, your entire application would freeze until the data arrived. This would lead to a terrible user experience. Asynchronous operations enable your application to continue executing other tasks, like updating the UI or responding to user input, while waiting for long-running operations to complete.

Key benefits include:

• Improved Responsiveness: Prevents UI freezes during I/O operations (network requests, file reading).
• Efficient Resource Usage: Allows the CPU to work on other tasks instead of waiting idly.
• Better User Experience: Applications feel faster and more interactive.

Callbacks

Callbacks were one of the earliest ways to handle asynchronous operations in JavaScript. A callback function is passed as an argument to another function and is executed after a particular operation has completed.

function greet(name, callback) {
  console.log('Hello, ' + name + '!');
  setTimeout(() => {
    console.log('Callback executed after 2 seconds.');
    callback();
  }, 2000);
}

greet('Alice', () => {
  console.log('Greeting complete.');
});

While simple, callbacks can lead to "callback hell" (deeply nested callbacks), making code difficult to read and maintain.

Promises

Promises offer a more structured way to handle asynchronous operations. A Promise represents the eventual result of an asynchronous operation. It can be in one of three states: pending, fulfilled, or rejected.

function delay(ms) {
  return new Promise((resolve, reject) => {
    if (ms < 0) {
      reject(new Error('Delay cannot be negative'));
    } else {
      setTimeout(() => {
        resolve(`Operation completed after ${ms}ms`);
      }, ms);
    }
  });
}

delay(1500)
  .then(message => {
    console.log(message); // "Operation completed after 1500ms"
    return delay(1000);
  })
  .then(message => {
    console.log(message); // "Operation completed after 1000ms"
  })
  .catch(error => {
    console.error('An error occurred:', error.message);
  });

Promises chainable using `.then()` and handle errors gracefully with `.catch()`.

Async/Await

Introduced in ES2017, `async` and `await` provide a more synchronous-looking syntax for working with Promises, making asynchronous code even more readable.

An `async` function always returns a Promise. The `await` keyword can only be used inside an `async` function; it pauses the execution of the `async` function until the Promise it's waiting for settles (either resolves or rejects).

async function performTasks() {
  try {
    console.log('Starting tasks...');
    const result1 = await delay(2000);
    console.log(result1);

    const result2 = await delay(1200);
    console.log(result2);

    console.log('All tasks finished.');
  } catch (error) {
    console.error('Task failed:', error.message);
  }
}

performTasks();

This syntax significantly simplifies complex asynchronous flows.

Common Asynchronous APIs

Several built-in JavaScript APIs are inherently asynchronous:

• `setTimeout()` / `setInterval()`: For scheduling code execution.
• `fetch()` API: For making network requests.
• Event Listeners: For handling user interactions (clicks, keypresses).
• Web Workers: For running scripts in background threads.

Error Handling

Robust error handling is crucial in asynchronous code. With Promises, use `.catch()`. With `async/await`, wrap your `await` calls in `try...catch` blocks.