В чем разница между Promise, async/await и callback?

Асинхронное программирование в JavaScript эволюционировало от простых колбэков через Promise к синтаксису async/await. Каждый подход решает проблему выполнения операций, которые занимают время (например, сетевые запросы или чтение файлов), не блокируя основной поток выполнения.

Callback (Функция обратного вызова)

Это базовая концепция: функция передается как аргумент в другую функцию и вызывается после завершения асинхронной операции. Главный недостаток — "callback hell" (ад колбэков), когда вложенные колбэки делают код нечитаемым и сложным для поддержки. Обработка ошибок также усложняется, так как каждая операция требует своей проверки.

// Пример с колбэком
function fetchData(callback) {
  setTimeout(() => {
    const data = { id: 1, name: 'John' };
    callback(null, data); // Первый аргумент — ошибка, второй — данные
  }, 1000);
}

fetchData((err, data) => {
  if (err) {
    console.error('Error:', err);
  } else {
    console.log('Data:', data);
  }
});

Promise (Обещание)

Promise — это объект, который представляет результат (успешный или неудачный) асинхронной операции. Он имеет три состояния: pending (ожидание), fulfilled (выполнено) и rejected (отклонено). Promise позволяет использовать цепочки .then() для обработки успешных результатов и .catch() для ошибок, что улучшает читаемость и управление потоком.

// Пример с Promise
function fetchDataPromise() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = true;
      if (success) {
        resolve({ id: 1, name: 'John' });
      } else {
        reject(new Error('Failed to fetch data'));
      }
    }, 1000);
  });
}

fetchDataPromise()
  .then(data => console.log('Data:', data))
  .catch(err => console.error('Error:', err));

Async/Await

Async/await — это синтаксический сахар, представленный в ES2017, который позволяет писать асинхронный код в стиле, похожем на синхронный. Ключевое слово async определяет асинхронную функцию, которая всегда возвращает Promise. Внутри такой функции можно использовать await для приостановки выполнения до разрешения Promise, что делает код линейным и легко отлаживаемым.

// Пример с async/await
async function fetchDataAsync() {
  try {
    const data = await fetchDataPromise(); // Ждем разрешения Promise
    console.log('Data:', data);
    return data;
  } catch (err) {
    console.error('Error:', err);
    throw err;
  }
}

fetchDataAsync();

Async/await особенно полезен при последовательных асинхронных операциях, где нужно избегать сложных цепочек .then(). Он также упрощает обработку ошибок с помощью try/catch, знакомого по синхронному коду.

Сравнение и применение

• Callback: Используется в старом коде, API Node.js (например, fs.readFile) и событиях. Подходит для простых одноразовых операций, но избегайте глубокой вложенности.
• Promise: Основа для современных асинхронных операций, таких как fetch API. Идеален для цепочек асинхронных задач и параллельного выполнения с Promise.all().
• Async/await: Рекомендуется для нового кода, особенно при сложной логике с условиями и циклами. Делает код чище и уменьшает вероятность ошибок.

Вывод: Используйте async/await для большинства новых проектов, так как это повышает читаемость и упрощает отладку. Promise остаются фундаментом для асинхронных операций и полезны для параллельного выполнения. Callback стоит применять только при работе с устаревшими библиотеками или для простых событийных обработчиков.