Asynchronous JavaScript

Understanding async operations is crucial for modern JavaScript.

Callbacks

function fetchData(callback) {
  setTimeout(() => {
    callback('Data loaded');
  }, 1000);
}
fetchData((data) => {
  console.log(data); // "Data loaded" after 1 second
});

Promises

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Success!');
    // or reject('Error!');
  }, 1000);
});
promise
  .then(result => console.log(result))
  .catch(error => console.error(error));

Async/Await (ES2017)

async function fetchUser() {
  try {
    const response = await fetch('/api/user');
    const user = await response.json();
    return user;
  } catch (error) {
    console.error('Failed to fetch user:', error);
  }
}

Promise.all

const promise1 = fetch('/api/users');
const promise2 = fetch('/api/posts');
const [users, posts] = await Promise.all([promise1, promise2]);

Promise.race

const timeout = new Promise((_, reject) =>
  setTimeout(() => reject('Timeout!'), 5000)
);
const data = await Promise.race([
  fetch('/api/data'),
  timeout
]);

Error Handling

async function safeFetch(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(HTTP error! status: ${response.status});
    }
    return await response.json();
  } catch (error) {
    console.error('Fetch failed:', error);
    return null;
  }
}