В чем разница между Promise и MutationObserver

«В чем разница между Promise и MutationObserver» — вопрос из категории Асинхронность, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Promise и MutationObserver решают разные задачи:

Promise — это механизм для работы с асинхронными операциями (например, запросы к API, таймеры). Он имеет три состояния: pending, fulfilled, rejected. Пример:

fetch('/api/data')
  .then(response => response.json())
  .catch(error => console.error(error));

MutationObserver — это API для отслеживания изменений в DOM (добавление/удаление узлов, атрибутов и т.д.). Пример:

const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => console.log('DOM changed!'));
});
observer.observe(document.body, { childList: true });

Ключевые отличия:

  1. Promise — для асинхронного кода, MutationObserver — для наблюдения за DOM.
  2. Promise одноразовый (resolve/reject), MutationObserver — долгоживущий наблюдатель.
  3. Promise — часть ES6, MutationObserver — Web API.