Что такое Promise и для чего используется в JS?angular-9

1. Что такое Promise?

Promise (Обещание) — это специальный объект в JavaScript, представляющий результат асинхронной операции, который может быть доступен сейчас или в будущем.

Основные состояния Promise:

  • pending (ожидание) — начальное состояние.
  • fulfilled (выполнено) — операция завершена успешно.
  • rejected (отклонено) — операция завершена с ошибкой.
const promise = new Promise((resolve, reject) => {
  // Асинхронная операция (например, HTTP-запрос)
  if (success) {
    resolve('Успех!'); // Переводим в fulfilled
  } else {
    reject('Ошибка!'); // Переводим в rejected
  }
});

2. Для чего используются Promise?

  • Асинхронные операции: Запросы к API, чтение файлов, таймеры.
  • Избегание "ада колбэков" (Callback Hell): 
    // Проблема без Promise (Callback Hell)
getUser(userId, function(user) {
  getPosts(user, function(posts) {
    getComments(posts[0], function(comments) {
      console.log(comments);
    });
  });
});

// Решение с Promise
getUser(userId)
  .then(user => getPosts(user))
  .then(posts => getComments(posts[0]))
  .then(comments => console.log(comments))
  .catch(error => console.error(error));

3. Методы Promise

  • .then() — обрабатывает успешное выполнение.
  • .catch() — обрабатывает ошибки.
  • .finally() — выполняется в любом случае.
  • Promise.all() — ожидает выполнение всех Promise.
  • Promise.race() — возвращает первый завершенный Promise.

Примеры:

// Цепочка вызовов
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

// Параллельное выполнение
Promise.all([fetch(url1), fetch(url2)])
  .then(responses => Promise.all(responses.map(res => res.json())))
  .then(data => console.log(data));

4. Promise в Angular

В Angular Promise часто используются вместе с Observable (из RxJS), но для простых асинхронных задач они идеальны:

@Injectable()
export class DataService {
  fetchData(): Promise<any> {
    return fetch('/api/data').then(response => response.json());
  }
}

// Использование в компоненте
this.dataService.fetchData()
  .then(data => this.data = data)
  .catch(error => this.error = error);

5. Async/Await

ES2017 представил async/await для работы с Promise в стиле синхронного кода:

async function loadData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

Резюмируем

  1. Promise — это объект для обработки асинхронных операций.
  2. Состояния: pending → fulfilled или rejected.
  3. Методы:
    • .then() — для успешного результата.
    • .catch() — для ошибок.
    • .finally() — для финальных действий.
  4. Плюсы:
    • Устраняют "Callback Hell".
    • Упрощают обработку ошибок.
    • Совместимы с async/await.

P.S. В современных Angular-проектах часто используют Observable (RxJS), но Promise остаются важной частью JS-экосистемы. Для работы с API fetch или async/await они незаменимы.

Вопросы

Собеседования