Что делает ключевое слово async?

Краткий ответ

Ключевое слово async перед функцией делает её асинхронной. Такая функция всегда возвращает Promise, даже если в ней обычное значение. Ключевое слово async позволяет использовать внутри функции ключевое слово [await] для ожидания выполнения других асинхронных операций.

// Обычная функция
function normalFunc() {
  return 'результат';
}
 
// Асинхронная функция
async function asyncFunc() {
  return 'результат';
}
 
// Разница в возвращаемом значении
console.log(normalFunc());    // 'результат'
console.log(asyncFunc());     // Promise { 'результат' }
 
// Использование с await
async function getData() {
  const result = await asyncFunc();
  console.log(result); // 'результат'
}

Полный ответ

Ключевое слово [async] — как специальная метка на функции, которая говорит: “Эта функция работает с асинхронными операциями”. Это как уведомление на почтовом ящике — оно говорит почтальону, что внутри могут быть специальные письма, требующие особой доставки! 📬

Что делает async

Ключевое слово [async] перед функцией:

Автоматически возвращает Promise — даже если функция возвращает обычное значение
Позволяет использовать await — внутри такой функции можно дожидаться асинхронных операций
Делает код чище — избавляет от цепочек [.then()]

Простые примеры

Базовое использование async

// Асинхронная функция с обычным возвратом
async function greet() {
  return 'Привет!';
}
 
// То же самое, что и:
// function greet() {
//   return Promise.resolve('Привет!');
// }
 
greet().then(message => console.log(message)); // 'Привет!'

Async с await

// Функция, имитирующая асинхронную операцию
function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
 
// Асинхронная функция с await
async function delayedGreeting() {
  console.log('Начинаю...');
  await delay(1000); // Ждём 1 секунду
  return 'Готово!';
}
 
// Использование
delayedGreeting().then(result => console.log(result));

Как работает async

Автоматическое превращение в Promise

async function withValue() {
  return 'значение';
}
 
async function withPromise() {
  return Promise.resolve('значение');
}
 
// Обе функции возвращают Promise
console.log(withValue());  // Promise { 'значение' }
console.log(withPromise()); // Promise { 'значение' }

Обработка ошибок

async function mightFail() {
  throw new Error('Ошибка!');
}
 
// То же самое, что и:
// function mightFail() {
//   return Promise.reject(new Error('Ошибка!'));
// }
 
mightFail().catch(error => console.log(error.message)); // 'Ошибка!'

Когда использовать async

Для работы с асинхронными операциями

// Работа с сетью
async function fetchUserData(userId) {
  // Имитация запроса к серверу
  const response = await fetch('/api/users/' + userId);
  const userData = await response.json();
  return userData;
}

Для упрощения кода

// Вместо цепочек .then()
// fetch('/api/data')
//   .then(response => response.json())
//   .then(data => processData(data))
//   .then(result => console.log(result))
//   .catch(error => console.log(error));
 
// Лучше использовать async/await
async function handleData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    const result = processData(data);
    console.log(result);
  } catch (error) {
    console.log(error);
  }
}

Частые ошибки

Забыть async перед await

// ❌ Ошибка — await вне async функции
// function bad() {
//   const result = await somePromise(); // SyntaxError!
// }
 
// ✅ Правильно
async function good() {
  const result = await somePromise(); // Работает!
}

Не обработать ошибки

// ❌ Ошибка — не обработана ошибка
// async function risky() {
//   const data = await fetch('/api/data');
//   // Если fetch завершится ошибкой, она "упадёт" наверх
// }
 
// ✅ Правильно — обработка ошибок
async function safe() {
  try {
    const data = await fetch('/api/data');
  } catch (error) {
    console.log('Ошибка:', error);
  }
}

Простые правила

async — делает функцию асинхронной и всегда возвращает Promise 📦
await — можно использовать только внутри async функций ⏱️
Читаемость — async/await делает асинхронный код похожим на синхронный 📖
Ошибки — используй try/catch для обработки ошибок в async функциях ⚠️
Цепочки — избавляет от длинных цепочек [.then()] 🔗

Ключевое слово [async] — это простой способ работать с асинхронным кодом, делая его более читаемым и понятным. Это современный стандарт написания асинхронного JavaScript! 💪

Хотите больше статей для подготовки к собеседованиям? Подписывайтесь на EasyAdvice, добавляйте сайт в закладки и совершенствуйтесь каждый день 💪